AngularJS Prevent Event Propagation Click Example
Today I was stuck with a problem in angularjs. I have a table row and a button in table cell. I have bound event event for both table row and button. So I have to disable event on table row click when I click on button, in other words I have to stop propagation of event on button click.
I found a solution as below,
<a href="#" ng-click="functionName(); $event.preventDefault(); $event.stopPropagation();">
$event.stopPropagation(); alone was not working. When I used $event.stopPropagation(); alone, on click it was redirecting to some other page. When I tried adding $event.preventDefault(); $event.stopPropagation();. It worked.
Reference:
http://stackoverflow.com/questions/10931315/how-to-preventdefault-on-anchor-tags
Today I was stuck with a problem in angularjs. I have a table row and a button in table cell. I have bound event event for both table row and button. So I have to disable event on table row click when I click on button, in other words I have to stop propagation of event on button click.
I found a solution as below,
<a href="#" ng-click="functionName(); $event.preventDefault(); $event.stopPropagation();">
$event.stopPropagation(); alone was not working. When I used $event.stopPropagation(); alone, on click it was redirecting to some other page. When I tried adding $event.preventDefault(); $event.stopPropagation();. It worked.
Reference:
http://stackoverflow.com/questions/10931315/how-to-preventdefault-on-anchor-tags
One of the beautiful aspects of AngularJS scopes is the ability to broadcast events and its handling of them. Some of your controllers might be waiting for some event to occur such as waiting for particular data to be available from an AJAX request. So, the controller that's responsible for obtaining the data can notify other controllers that it's arrived and send the actual data, too. This is done by emitting or broadcasting events. By doing this controllers up in the scope hierarchy or down in the scope hierarchy can handle the event and do something meaningful.
ReplyDelete$("span").click(function(event){
event.stopPropagation();
alert("The span element was clicked.");
});
$("p").click(function(event){
alert("The p element was clicked.");
});
$("div").click(function(){
alert("The div element was clicked.");
});
AngularJS Training in Chennai
This comment has been removed by the author.
ReplyDelete