事件 – AngularJS – 多重点击 – 事件冒泡

发布时间：2020-12-17 08:45:01 所属栏目：安全来源：网络整理

导读：在以下示例中： li ng-repeat="item in items" ng-click="showItem(item)" h3{{item.title}}/h3 button ng-click="remove(item)"Remove/button /li 当我点击按钮showItem()也被调用由于事件冒泡。我知道，我可以使用$事件来观察$ event.currentTarget和做$

在以下示例中：

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

当我点击按钮showItem()也被调用由于事件冒泡。
我知道，我可以使用$事件来观察$ event.currentTarget和做$ event.stopPropagation()等，但这是非常丑陋。

Btw。我不想停止传播的按钮(在我的情况下按钮是一个twitter bootstrap dopdown /按钮 – 这只是一个例子)

当我点击删除按钮时，如何停止showItem()从beeing调用？

编辑
丑陋的修复将是：

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
}

这个解决方案为我工作(我只支持最近的浏览器，所以我试图修改代码更复古兼容)：

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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!