AngularJS - 多次 ng-click - 事件冒泡 [英] AngularJS - multiple ng-click - event bubbling

问题描述

在下面的例子中:

  <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() 等，但这非常丑.

When I click on the button showItem() also is invoked due to event bubbling. I know that I can use $event to watch for $event.currentTarget and do $event.stopPropagation() etc. but this is very ugly.

顺便说一句.我不想停止在 button 上的传播(在我的情况下，button 是一个 twitter bootstrap dopdown/button - 这只是一个例子)

Btw. I don't want to stop propagation on the button (In my case the button is a twitter bootstrap dopdown/button - this is just an example)

当我点击 remove 按钮时，如何阻止 showItem() 被调用?

How do I stop showItem() from beeing called when I click on the remove button?

编辑丑陋的解决办法是:

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
}

推荐答案

这个解决方案对我有用(我只支持最近的浏览器，所以我尝试修改代码以使其更加兼容):

This solution worked for me (I'm only supporting recent browsers, so I tried to modify the code to be more retro-compatible):

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
}

EDIT - 添加了一个 JSFiddle 演示来试用http://jsfiddle.net/24e7mapp/1/

EDIT - Added a JSFiddle demo to try it out http://jsfiddle.net/24e7mapp/1/

这篇关于AngularJS - 多次 ng-click - 事件冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！