In the following example:
<li ng-repeat="item in items" ng-click="showItem(item)">
<h3>{{item.title}}</h3>
<button ng-click="remove(item)">Remove</button>
</li>
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.
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)
How do I stop showItem()
from beeing called when I click on the remove
button?
EDIT The ugly fix would be to have:
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>
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 - Added a JSFiddle demo to try it out http://jsfiddle.net/24e7mapp/1/