标签上的 Angular.js ng-click 事件触发了两次答案

【问题标题】：Angular.js ng-click events on labels are firing twice标签上的 Angular.js ng-click 事件触发了两次
【发布时间】：2014-01-08 11:36:56
【问题描述】：

使用 angular.js 给出以下代码

请戳这里：http://plnkr.co/edit/i4MAzs

HTML：

<form name="myForm" ng-controller="Ctrl">
  Try clicking on the labels. <br/>
  <label>
    Value1: <input type="checkbox" ng-checked='value1' ng-click='toggleValue1()'>
  </label> <br/>
  <label ng-click='toggleValue2()'>
    Value2: <input type="checkbox" ng-checked="value2">
  </label> <br/>
  <tt>value1 = {{value1}}</tt><br/>
  <tt>value2 = {{value2}}</tt><br/>
  <tt>fire_count = {{fire_count}}</tt>
</form>

Javascript：

angular.module('App', []);

function Ctrl($scope) {
  $scope.value1 = true;
  $scope.value2 = 'YES'
  $scope.fire_count = 0;

  $scope.toggleValue1 = function(){
    $scope.value1 = !$scope.value1;
    $scope.fire_count++;
    console.log("Clicked!");
  }

  $scope.toggleValue2 = function(){
    $scope.value2 = !$scope.value2;
    $scope.fire_count++;
    console.log("Clicked!");
  }
}

单击“Value2”标签时，单击事件将触发两次。这仅在 ng-click 附加到标签时发生。当它附加到输入元素时，一切都按预期工作。

有人可以解释发生了什么吗？

【问题讨论】：

很奇怪，如果你把“label”改成“div”就可以正常工作了

标签： javascript angularjs

【解决方案1】：

看看这个答案：

https://stackoverflow.com/a/17185362/3093703

另外，我已经编辑了您的 plnkr 以显示事件目标：

http://plnkr.co/edit/73aslwHnwVcTd2fxSJ0f?p=preview

输入和标签元素都在接收事件。

为避免这种情况，您可以在执行任何操作之前检查事件目标的标记名称。

编辑

为什么会这样：标签实际上以 div 或其他元素不会的方式与输入元素相关联。输入称为标签的labeled control。

当您在标签上触发动作时，该动作也会在带标签的控件上运行：

例如，在单击复选框标签选中复选框的平台上，单击以下 sn-p 中的标签可能会触发用户代理在输入元素上运行合成单击激活步骤，就好像元素本身已被触发由用户

【讨论】：