[英]Boostrap 3: Click over button doesn't work
I'm working on a web application which uses AngularJS and Twitter Bootstrap.我正在开发一个使用 AngularJS 和 Twitter Bootstrap 的 Web 应用程序。 My app works fine with Firefox, but with Chrome or Chromium (my operation system is Ubuntu) when I click button, this click is not detected correctly.
我的应用程序在 Firefox 上运行良好,但在 Chrome 或 Chromium(我的操作系统是 Ubuntu)上单击按钮时,无法正确检测到此单击。 The click is detected but the object event is null or is not detected.
检测到单击但对象事件为空或未检测到。 As you can see, it only writes
evento:
but not the id
.如您所见,它只写入
evento:
而不是id
。 In Firefox it writes evento:
and the id
correctly.在 Firefox 中,它正确写入
evento:
和id
。
HTML: 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: 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();
}
}
I have made this plunker using the same code to check the error and it works: https://plnkr.co/edit/vbBhVCrkpLyRl63Lwlur我使用相同的代码制作了这个 plunker 来检查错误并且它有效: https ://plnkr.co/edit/vbBhVCrkpLyRl63Lwlur
I don't understand anything.我什么都不明白。 Why is it not working in my web application while in the plunker works fine?
为什么它在我的 Web 应用程序中不起作用而在 plunker 中工作正常? What happend?
发生了什么事?
Edit 1 : My goal is to get the id of the object over I have made a clic.编辑 1 :我的目标是在我创建了一个 clic 后获取对象的 id。 With Firefox, Chrome and Chromium.
使用 Firefox、Chrome 和 Chromium。 Right now, the id from the event is retrieved only by Firefox.
现在,事件的 id 只能由 Firefox 检索。 With Chrome and Chromium the event is fired by I can't retrieve the id from the object event.
使用 Chrome 和 Chromium 时,事件是由我无法从对象事件中检索 id 触发的。
Edit 2: I have added a trace to my code to know is event variable is null or not and when I make click in Chrome o Chromium event variable is not null but the id is not detected!!!编辑 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();
}
}
You can try by currentTarget
instead of target
.您可以尝试使用
currentTarget
而不是target
。 Because of currentTarget
get the element whose event listeners triggered a specific event由于
currentTarget
获取其事件侦听器触发特定事件的元素
self.changeView = function(event) {
console.log("evento: " + event.currentTarget.id);
};
It may help you它可能会帮助你
Take a look at fixed fiddle: https://plnkr.co/edit/QftJvAhSYmfq57zknWq8?p=preview看看固定小提琴: https ://plnkr.co/edit/QftJvAhSYmfq57zknWq8 ? p =preview
In common case you should use $scope.checkClick()
in controllers instead of this.checkClick()
:通常情况下,您应该在控制器中使用
$scope.checkClick()
而不是this.checkClick()
:
$scope.checkClic = function(obj) {
console.log("obj: " + obj);
};
and there is no point to call method in html like ctrl.methodName()
.并且没有必要像
ctrl.methodName()
那样在 html 中调用方法。
You can just do:你可以这样做:
<button ng-click = "checkClick('Button Clicked!!!')">
Using this allowed only at services
.仅允许在
services
使用此services
。 Even in factories
you shouldn't use this
(use return {a:..., b: function(){...}}
syntax.即使在
factories
您也不应该使用this
(使用return {a:..., b: function(){...}}
语法。
In controllers or directives you should use $scope
(or scope
for directives) to provide your methods to html在控制器或指令中,您应该使用
$scope
(或指令的scope
)向 html 提供您的方法
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.