复选框中的ng-change被触发了多次，因为在其上单击ng [英] ng-change in a checkbox fired more than one time, because an ng-click over it

问题描述

因为一个代码要好于1000个单词，所以我创建了一个插件来显示我的问题：
http://bit.ly/1uiR2wy

As a code is better than 1000 words, I've created a plunker in order to show my problem: http://bit.ly/1uiR2wy

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

Given the specific DOM element, thing is that I have an input checkbox with an ng-change, I want to add an ng-click to the li that wraps it in order to be able to click in the whole area. This new ng-click makes the method in the ng-change to happens twice. And is even worse for an SPAN DESCRIPTION 2 that is happening 3 times.

<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，但似乎无法解决问题。
有任何想法吗？
如果您检查了放声器并打开控制台，您会完美地看到问题。

I've tried with stopPropagation and it seems that it doesn't solve the issue. Any ideas about it? If you check the plunker and open the console you'll see the issue perfectly.

在此先感谢大家

推荐答案

您需要在 label 级别上停止事件传播。尝试以下操作：

You need to stop event propagation on label level. Try this:

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

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

发生这种情况的原因是标签（连接到相应的复选框）之类的事件再产生一次点击事件，以将点击传递给输入。此click事件引起描述的奇怪问题，因为它仍然像正常事件一样冒泡（嗯，这是正常事件），因此可以通过 ngClick 指令检测到。

这篇关于复选框中的ng-change被触发了多次，因为在其上单击ng的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！