7

由于代码优于 1000 字，我创建了一个 plunker 来显示我的问题： http ://bit.ly/1uiR2wy

鉴于特定的 DOM 元素，事情是我有一个带有 ng-change 的输入复选框，我想在包装它的 li 中添加一个 ng-click，以便能够在整个区域中单击。这个新的 ng-click 使 ng-change 中的方法发生两次。对于发生 3 次的 SPAN 描述 2，情况更糟。

<li class="odd" ng-click="changeToggleModel($event)">
  <span class="overcomeDescription ellipsis-overflow">span description</span>
  <label>      
    <span>SPAN DESCRIPTION 2</span>
    <input type="checkbox" ng-change="toggleSelection($event)" ng-model="isSelected">
  </label>
</li>

我已经尝试过 stopPropagation ，它似乎并没有解决问题。有什么想法吗？如果您检查 plunker 并打开控制台，您将完美地看到问题。

在此先感谢大家

4

2 回答 2

13

您需要在标签级别停止事件传播。尝试这个：

<label ng-click="$event.stopPropagation()" ...>

演示：http ://plnkr.co/edit/AjD9GlA3zjxABix6hegg?p=preview

发生这种情况的原因是标签（连接到相应的复选框）会再生成一个点击事件，以便将点击传递给输入。这个点击事件会导致描述的奇怪问题，因为它仍然像正常事件一样冒泡（这是正常事件），因此被ngClick指令检测到。

于 2014-11-16T22:14:17.600 回答
1

迟到了，但遇到了同样的问题——AngularJS 似乎分别明确地传播了点击事件。您可以在输入中显式捕获它，而不是停止标签上的传播：

    <input 
      type="checkbox"
      ng-click="$event.stopPropagation()"
      ng-change="toggleSelection($event)"
      ng-model="isSelected"
    >
于 2017-05-08T20:44:52.653 回答