Question

我有以下代码：

 <ul class="dropdown-menu">
   <li ng-click="setValue('X')" ng-class="selected === 'X' ? 'active' : 'not-active'"><span>X <i class="fa fa-times" ng-click="unselect()"/></span></li>
   <li ng-click="setValue('Y')" ng-class="selected === 'Y' ? 'active' : 'not-active'"><span>Y <i class="fa fa-times" ng-click="unselect()"/></span></li>
 </ul>

如果选择了值，我正在切换类。我想在图标上添加一个事件（仅在选中它时才可见），但是，每当我点击图标时，都会触发两次点击。我的问题是：当选择行时，如何禁用父元素上的ng-click？

Answer 1

您需要将left: 80px; //play with the amount to find what works.添加到内部$event.stopPropagation()：

ng-click

这将阻止调用父元素上的<i class="fa fa-times" ng-click="unselect(); $event.stopPropagation();"/>。

Answer 2

当您在DOM元素中编写和事件时，它的调用会将呼叫事件附加到所有父级的父级，直到HTML标记。

您可以通过阻止事件进一步传播来防止这种情况发生。 stopPropagation正是这样做的。您可以在此处找到详细信息https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation

在您的unselect函数中，您可以像这样调用

function unselect(event) {
    event.stopPropagation();
    // Your original code
}

Ng点击<li>内部的NgClick

2 个答案: