如何防止ng-click在标签标签上触发两次？

当我单击其中包含输入的标签时，Agnular的ng-click会触发两次。 我试过$event.stopPropagation(); 但是没有用，怎么解决这个问题：

我也检查了这个问题： 标签上的Angular.js ng-click事件被触发两次

 
Answer 1
 
   {{item.name}}  
  

Answer 2

使用ng-change="updateSelected"

仅在输入上使用此选项，因为即使单击标签也会触发更改。

Answer 3

那就是因为label是checkbox的父级或容器，所以click处理程序附加到您的案例中的完整容器，因此无论何时单击label或checkbox ，都会触发事件。

---

您的方法有什么问题：

• 首先永远不要在标签内插入输入标签，这不是在html中构造标记的好方法。在Angular.js这种行为导致两个标签都触发click事件。 所以要在input标签和label之间添加绑定，请使用label的for属性。
• 在label中使用$event.stopPropagation()实际上会阻止所有事件从标签传播/沸腾到DOM的顶部。 这不会起任何作用，因为事件仍会传播到标签中的输入。

我希望你能想象我在说什么。

我做了什么：

• 使用属性将input绑定到标签并添加click事件以防止默认function。

• 将单击处理程序添加到相应的input标记而不是label

  Click me

现场演示@ JSFiddle

这样您就不必担心事件处理中的任何冲突，也不必担心维护HTML代码的方式:)

Answer 4

我正在使用最新版本的Angular Material 1.0.3，并且当点击在Android上配置为按钮的标签时仍然存在此问题。 我在IOS或浏览器（cordova应用程序）上没有问题。 以下为我解决了这个问题。

我的HTML：

  About 

我的控制器：

  vm.goAbout = debounceFn(function(){ //show dialog here, and now it only pops up once }, 250, false); 

去抖function：

 function debounceFn(func, wait, immediate){ var timeout; var deferred = $q.defer(); return function() { var context = this, args = arguments; var later = function() { timeout = null; if(!immediate) { deferred.resolve(func.apply(context, args)); deferred = $q.defer(); } }; var callNow = immediate && !timeout; if ( timeout ) { $timeout.cancel(timeout); } timeout = $timeout(later, wait); if (callNow) { deferred.resolve(func.apply(context,args)); deferred = $q.defer(); } return deferred.promise; } }