jquery - 点击标签触发两次滑动动画

Question

我无法在这个 demo 中弄清楚这一点，为什么点击标签触发滑动动画两次，而点击复选框触发滑动动画一次。有人可以解释一下吗？谢谢!

我在此处附上代码。

<div ng-app="labelApp" ng-controller="labelCtrl">
  <label ng-click="toggle()">
    <input type="checkbox">Click to toggle slide</label>
  <div id="myDiv">
    Clicking check box triggers sliding animation once. 
    <br>
    Clicking label triggers sliding animation twice.
  </div>
</div>

angular.module("labelApp", [])
  .controller("labelCtrl", function($scope) {
    $scope.toggle = function() {
      $("#myDiv").slideToggle();
    }
  });

Answer 1

当您单击标签时，事件将向下传输到输入，在那里它将导致复选框被选中，然后它会向上冒泡返回到再次>标签。因此，label 上的处理程序会被触发两次。快速解决方法是将处理程序放在输入上:

<label>
    <input ng-click="toggle()" type="checkbox">Click to toggle slide
</label>

但可能更合适的是使用ng-change:

<input ng-change="toggle()" ng-model="isChecked" type="checkbox">Click to toggle slide