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

Question

给出以下使用angular.js的代码

Plunkr: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附加到标签时才会发生这种情况.当它附加到输入元素时,一切都按预期工作.

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

Answer 1

看看这个答案:

/sf/answers/1202975371/

另外,我已经编辑了你的plnkr以显示事件目标:

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

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

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

编辑

至于为什么:标签实际上与div或其他元素不相关的输入元素绑定.输入称为标签的标记控件.

当您在标签上触发操作时,该操作也会在标记的控件上运行:

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