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

Question

当我点击里面有输入的标签时，Angular 的 ng-click 会被触发两次。我试过$event.stopPropagation(); 但没有用。我该如何解决？

我也检查了这个问题： Angular.js ng-click events on labels are firing twice

<div class="list-group-item" ng-repeat="item in model.data">
  <form role="form" name="selectForm" novalidate>
    <label ng-click="$event.stopPropagation(); updateSelected();">
      <input type="checkbox" ng-model="chechkedSkins[item.id]" />
      <span>{{item.name}}</span>
    </label>
  </form>
</div>

Answer 1

使用ng-change="updateSelected"

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

Answer 2

那是因为label 是checkbox 的父容器或容器，因此在您的情况下click 处理程序附加到完整容器，因此无论何时单击label 或checkbox，事件被触发。

---

你的方法有什么问题：

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

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

我做了什么：

• 使用for 属性将input 绑定到标签并添加click 事件以阻止默认功能。

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

  <label for="username" ng-click="$event.preventDefault();">Click me</label> <input type="text" id="username" ng-click="updateSelected();">

Live Demo @ JSFiddle

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

Answer 3

我使用的是最新版本的 Angular Material 1.0.3，但在单击 Android 上配置为按钮的标签时仍然遇到此问题。我在 IOS 或浏览器（cordova 应用程序）上没有问题。以下为我解决了它。

我的html：

 <label class="btn btn-primary" ng-click="vm.goAbout()">About</label>

我的控制器：

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

去抖动功能：

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;
       }
  }