AngularJS - 多个 ng-click - 事件冒泡

Question

在下面的例子中：

  <li ng-repeat="item in items" ng-click="showItem(item)">
    <h3>{{item.title}}</h3>
    <button ng-click="remove(item)">Remove</button>
  </li>

当我点击按钮showItem()时，由于事件冒泡也会被调用。 我知道可以使用$event来监听$event.currentTarget并执行$event.stopPropagation()等操作，但这很丑陋。

顺便说一下，我不想在button上停止传播（在我的情况下，button是一个twitter bootstrap的dopdown/button - 这只是一个示例）

如何停止在我点击remove按钮时调用showItem()？

编辑： 丑陋的解决方法是：

function remove(item,$event){
  $event.originalEvent.prevent = true;
  // rest of the code
}

function showItem(item,$event){
  if($event.originalEvent.prevent)return;
  // rest of the code
}

- g00fy

---

如果您无法使用stopPropagation，则必须重构您的DOM以使其不嵌套。这是可能的吗？ - Mathew Berg

Answer 1

这个解决方案对我有用（因为我只支持较新的浏览器，所以我尝试修改代码以使其更具向后兼容性）：

HTML：

<li ng-repeat="item in items" ng-click="showItem(item)">
    <h3>{{item.title}}</h3>
    <button ng-click="remove(item, $event)">Remove</button>
</li>

脚本:

function remove(item, $event) {
    // do some code here

    // Prevent bubbling to showItem.
    // On recent browsers, only $event.stopPropagation() is needed
    if ($event.stopPropagation) $event.stopPropagation();
    if ($event.preventDefault) $event.preventDefault();
    $event.cancelBubble = true;
    $event.returnValue = false;
}
function showItem(item) {
    // code here
}

编辑 - 增加了一个JSFiddle演示以供尝试http://jsfiddle.net/24e7mapp/1/

- Tibo

---

@Ron，请查看演示并在不同的浏览器版本上尝试。 - Tibo

$event.cancelBubble = true; 和 $event.returnValue = false; 都会导致 Chrome/ium 崩溃（在 43.0.2357.130 版本上测试过）。 - arcol

@arcol 你可以在之前简单地进行检查，像这样：if ($event.cancelBubble) { $event.cancelBubble = true; }。 - Tibo

@Tibo 为什么要将 cancelBubble 设置为 true，当它已经评估为 true（否则条件永远不会满足）。 - Thomas Urban

@cepharum 对不起，你是正确的，我写得太快了。应该是：if (typeof $event.cancelBubble === 'boolean') $event.cancelBubble = true; 顺便说一下，这对Chrome 58和Opera 45没有影响（参见ref）。 - Tibo

Answer 2

showItem 可以更新，如果传入的 item 不再存在，则提前返回：

function remove(item) {
  if (-1 == $scope.items.indexOf(item)) {
    // Item no longer exists, return early
    return;
  }
  // Rest of code here
}

- Hector Virgen