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

8 浏览
0 Comments

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

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

这里是Plunkr: http://plnkr.co/edit/i4MAzs

HTML：


  尝试点击标签。
   
   
  value1 = {{value1}}
  value2 = {{value2}}
  fire_count = {{fire_count}}

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附加到标签时发生。当它附加到输入元素时，一切都按预期工作。

有人能解释一下发生了什么吗？

0

1 答案

0 Comments

在这个问题中，标签上的Angular.js ng-click事件会触发两次。问题的原因是，当你点击标签时，事件会同时作用于标签和标签所关联的输入框元素。为了避免这个问题，可以在执行任何操作之前，检查事件目标的标签名。

为什么会出现这个问题呢？因为标签实际上是与输入框元素关联的。输入框被称为标签的"labeled control"。当你在标签上触发一个动作时，这个动作也会在关联的输入框上执行。

例如，在某些平台上，点击复选框标签会选中复选框，点击下面这个代码片段中的标签，可能会触发用户代理在输入框元素上运行合成点击激活步骤，就好像用户自己触发了该元素一样:

For example, on platforms where clicking a checkbox label checks the checkbox, clicking the label in the following snippet could trigger the user agent to run synthetic click activation steps on the input element, as if the element itself had been triggered by the user

为了解决这个问题，可以在ng-click事件的处理函数中添加一些逻辑，根据事件目标的标签名来判断是否执行操作。这样就可以避免事件在标签和输入框上重复触发。

以上是关于Angular.js ng-click事件在标签上触发两次的问题的原因和解决方法的整理。

0