angularjs – 一个复选框中的ng-change多次触发,因为在它上面点

发布时间：2020-12-17 17:57:55 所属栏目：安全来源：网络整理

导读：由于代码优于1000字,我创建了一个plunker以显示我的问题： http://bit.ly/1uiR2wy 给定特定的DOM元素,事情就是我有一个带有ng-change的输入复选框,我想添加一个ng-click到包含它的li,以便能够在整个区域中单击. 这个新的ng-click使ng-change中的方法发生两次

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

给定特定的DOM元素,事情就是我有一个带有ng-change的输入复选框,我想添加一个ng-click到包含它的li,以便能够在整个区域中单击.
这个新的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并打开控制台,您将完全看到问题.

在此先感谢大家

解决方法

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

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

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

它发生的原因是标签(连接到相应的复选框)排序生成一个点击事件,以便将点击传递给输入.此单击事件会导致所描述的奇怪问题,因为它仍然像正常事件一样起泡(这是正常事件),因此由ngClick指令检测到.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!