Javascript 当 div 被 (ng) 禁用时，ng-click 仍然会触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32005918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-click still fires when div is (ng)disabled
提问by None
Problem is that ng-clickworks on so event if cancelTicket === falseit still fires ng-click. How can I stop that?
问题是，ng-click如果cancelTicket === false它仍然触发，则适用于 so 事件ng-click。我怎么能阻止呢？
<div class="btn-block save-changes padding-10" ng-class="{'gray':cancelTicket===false,'secondary-button':cancelTicket===true}" ng-click="CancelTicket(ticketPin)" ng-disabled="cancelTicket===false" style="display: table;">
<div class="button-container padding3" ng-class="{'pointer':cancelTicket===true}">
<button-spinner promise="cancelPromise"></button-spinner>
<div style="display: inline-block !important;"> @Translator.Translate("CANCEL") </div>
</div>
</div>
回答by Erazihel
Event is triggered even if the divis disabled.
即使div禁用了，也会触发事件。
You can avoid this by using lazy evaluation of expressions like isDisabled || action()so action would not be called if isDisabledis true.
您可以通过对表达式使用惰性求值来避免这种情况，例如isDisabled || action()，如果isDisabledis 则不会调用 action true。
In your case it will be:
在您的情况下，它将是：
ng-click="cancelTicket === false || CancelTicket(ticketPin)"
回答by Huy Ho
You should change DIV tag to Button Tag. It works for me.
您应该将 DIV 标签更改为按钮标签。这个对我有用。
回答by Reactgular
You can disable click events when an element with ng-clickis disabled.
当元素ng-click为时，您可以禁用单击事件disabled。
jQuery:
jQuery：
$('*[ng-click]').on('click',function(event) {
var $el = $(event.target);
if($el.attr('disabled')) {
event.stopPropagation();
}
});
Doing this on all DOM elements could produce unwanted results. Also, you will need to run the above on any new HTML updated on the DOM.
对所有 DOM 元素执行此操作可能会产生不需要的结果。此外，您将需要在 DOM 上更新的任何新 HTML 上运行上述内容。
Instead, we can modify just buttons to work as expected.
相反，我们可以只修改按钮以按预期工作。
Angular:
角度：
angular.module('app').directive('button',function() {
return {
restrict: 'E',
link: function(scope,el) {
var $el = angular.element(el);
$el.bind('click', function(event) {
if($el.attr('disabled')) {
event.stopImmediatePropagation();
}
});
}
}
});
I would not do the above on divelements as it would be to heavy. Instead, modify your approach so that buttonelements are only used for clickable interactions. You can then style them to look like other divelements.
我不会对div元素执行上述操作，因为它会很重。相反，请修改您的方法，以便button元素仅用于可点击的交互。然后，您可以将它们设置为看起来像其他div元素。
回答by Tính Ng? Quang
<a class="btn btn-danger btn-xs" ng-click="vm.handleRemove(device)" ng-disabled="status === 1">Delete</a>
Change a tagto button tagthen OK
将标签更改为按钮标签，然后确定
<button class="btn btn-danger btn-xs" ng-click="vm.handleRemove(device)" ng-disabled="status === 1">Delete</button>
回答by Gaetano
My solution has been to use an html directive with an attribute used instead of ng-click, so that
我的解决方案是使用带有属性的 html 指令而不是 ng-click，以便
<html-tag-directive new-click="ctrl.functionToCall()" disabled="ctrl.disabled" >
and the directive defined as follow:
和指令定义如下：
1) template:
1）模板：
<button type="button"
ng-disabled="disabled" ng-click="onClick()">
</button>
2) controller:
2）控制器：
angular.module('module')
.directive('htmlTagDirective',function() {
return {
restrict:'E',
templateUrl:'template.html',
scope:{
disabled:'=',
click: '&'
},
link:function(scope,element){
scope.onClick = function() {
if (!(scope.disabled)) {
scope.newClick();
}
};
}
};
});
