在以下示例中:
<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
and do $event.stopPropagation()
等等,但这非常难看。
顺便提一句。我不想停止传播button
(就我而言button
is a twitter bootstrap
dopdown/button
- 这只是一个例子)
我该如何停止showItem()
当我点击时被叫remove
button?
EDIT丑陋的解决办法是:
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>
Scripts:
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/ http://jsfiddle.net/24e7mapp/1/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)