AngularJS - 多次点击 - 事件冒泡答案

【问题标题】：AngularJS - multiple ng-click - event bubblingAngularJS - 多次点击 - 事件冒泡
【发布时间】：2021-12-17 15:39:20
【问题描述】：

在以下示例中：

  <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
}

【问题讨论】：

如果你不能使用 stopPropagation，你将不得不重组你的 dom，这样它们就不会被嵌套。这可能吗？

标签： javascript angularjs dom-events angularjs-ng-repeat angularjs-ng-click

【解决方案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/

【讨论】：

此方法在 Chrome 版本 35.0.1916.153 m 上对我不起作用，但 $event.stopPropagation() 可以。我不需要 $event.returnValue。
没错。在 Chrome（和其他现代浏览器）中，您可以在第一行停止：$event.stopPropagation();（没有“if”）。但正如 cmets 中所指定的，如果您需要使其在 IE8 或更少版本中运行，您必须使用 $event.preventDefault() 或 cancelBuble/returnValue。也许这两个不是必需的，我记不清了。
@Ron，请查看演示并在不同的浏览器版本上试用。
$event.cancelBubble = true; 和 $event.returnValue = false; 都破坏了 Chome/ium（在 43.0.2357.130 上测试）。
@arcol 你可以简单地检查一下，像这样：if ($event.cancelBubble) { $event.cancelBubble = true; }。

【解决方案2】：

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

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

【讨论】：