如何防止ng-click在标签标签上触发两次？

Question

当我单击其中包含输入的标签时,Agnular的ng-click会触发两次.我试过$event.stopPropagation();但没有用,怎么解决这个问题？

我也检查了这个问题: 标签上的Angular.js ng-click事件被触发两次

<div class="list-group-item" ng-repeat="item in model.data">
  <form role="form" name="selectForm" novalidate>
    <label ng-click="$event.stopPropagation(); updateSelected();">
      <input type="checkbox" ng-model="chechkedSkins[item.id]" />
      <span>{{item.name}}</span>
    </label>
  </form>
</div>

Answer 1

使用 ng-change="updateSelected"

仅在输入上使用此选项,因为即使单击标签也会触发更改.

Answer 2

好了那是因为label是父母或容器的checkbox,所以click处理程序连接到完整的容器,你的情况,从而每当无论是label或checkbox点击,则触发事件.

您的方法有什么问题:

• 首先永远不要在标签内插入输入标签,这不是在html中构造标记的好方法.Angular.js这种行为导致两个标签都触发click事件.所以在input标签之间添加一个绑定并label使用for标签的属性.
• 使用$event.stopPropagation()内部标签实际上阻止所有事件从标签传播/沸腾到DOM的顶部.这不会起任何作用,因为事件仍会传播到标签中的输入.

我希望你能想象我在说什么.

我做了什么:

• 使用for属性将input标签绑定到标签并添加click事件以防止默认功能.

• 将单击处理程序添加到相应的input标记而不是label

  <label for="username" ng-click="$event.preventDefault();">Click me</label> <input type="text" id="username" ng-click="updateSelected();">

现场演示@ JSFiddle

这样您就不必担心事件处理中的任何冲突,也不必担心维护HTML代码的方式:)