[英]Boostrap 3: Click over button doesn't work
我正在開發一個使用 AngularJS 和 Twitter Bootstrap 的 Web 應用程序。 我的應用程序在 Firefox 上運行良好,但在 Chrome 或 Chromium(我的操作系統是 Ubuntu)上單擊按鈕時,無法正確檢測到此單擊。 檢測到單擊但對象事件為空或未檢測到。 如您所見,它只寫入evento:
而不是id
。 在 Firefox 中,它正確寫入evento:
和id
。
HTML:
<button id = "removeLeftTables" ng-click = "hmCtrl.changeView($event)">
<span class="glyphicon glyphicon-remove " aria-hidden="true" style = "vertical-align: middle; font-size: 25px"></span>
</button>
JS:
self.changeView = function(event){
console.log("evento: " + event.target.id);
if (event.target.id == "removeLeftTables"){
self.show_left_tables = false;
self.style_left_content = "";
self.style_right_content = "";
self.style_tables_content = "";
self.cleanTabStyles();
}
if (event.target.id == "removeRightTables"){
self.show_right_tables = false;
self.style_right_content = "";
self.style_left_content = "";
self.style_tables_content = "";
self.cleanTabStyles();
}
}
我使用相同的代碼制作了這個 plunker 來檢查錯誤並且它有效: https ://plnkr.co/edit/vbBhVCrkpLyRl63Lwlur
我什么都不明白。 為什么它在我的 Web 應用程序中不起作用而在 plunker 中工作正常? 發生了什么事?
編輯 1 :我的目標是在我創建了一個 clic 后獲取對象的 id。 使用 Firefox、Chrome 和 Chromium。 現在,事件的 id 只能由 Firefox 檢索。 使用 Chrome 和 Chromium 時,事件是由我無法從對象事件中檢索 id 觸發的。
編輯 2:我在我的代碼中添加了一條跟蹤,以了解事件變量是否為空,以及當我在 Chrome 中單擊時 o Chromium 事件變量不為空但未檢測到 id !
$scope.changeView = function(event){
if (event == null)
console.log("event is NULL");
else
console.log("event IS NOT NULL");
console.log("evento: " + event.target.id);
if (event.target.id == "removeLeftTables"){
self.show_left_tables = false;
self.style_left_content = "";
self.style_right_content = "";
self.style_tables_content = "";
self.cleanTabStyles();
}
if (event.target.id == "removeRightTables"){
self.show_right_tables = false;
self.style_right_content = "";
self.style_left_content = "";
self.style_tables_content = "";
self.cleanTabStyles();
}
}
您可以嘗試使用currentTarget
而不是target
。 由於currentTarget
獲取其事件偵聽器觸發特定事件的元素
self.changeView = function(event) {
console.log("evento: " + event.currentTarget.id);
};
它可能會幫助你
看看固定小提琴: https ://plnkr.co/edit/QftJvAhSYmfq57zknWq8 ? p =preview
通常情況下,您應該在控制器中使用$scope.checkClick()
而不是this.checkClick()
:
$scope.checkClic = function(obj) {
console.log("obj: " + obj);
};
並且沒有必要像ctrl.methodName()
那樣在 html 中調用方法。
你可以這樣做:
<button ng-click = "checkClick('Button Clicked!!!')">
僅允許在services
使用此services
。 即使在factories
您也不應該使用this
(使用return {a:..., b: function(){...}}
語法。
在控制器或指令中,您應該使用$scope
(或指令的scope
)向 html 提供您的方法
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.