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

前端之家收集整理的这篇文章主要介绍了事件 – AngularJS – 多重点击 – 事件冒泡前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在以下示例中: @H_403_1@<li ng-repeat="item in items" ng-click="showItem(item)"> <h3>{{item.title}}</h3> <button ng-click="remove(item)">Remove</button> </li>

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

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

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

编辑@H_403_4@丑陋的修复将是:

@H_403_1@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:

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

脚本:

@H_403_1@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演示试试@H_403_4@http://jsfiddle.net/24e7mapp/1/

猜你在找的Angularjs相关文章