Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Stop Event Propagation on click in AngularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 14.2k
    Comment on it

    Sometimes you have a click event on parent div as well as child elements of it. If you click on the child element, it automatically calls the parent click function along with its own function. This is called event bubbling. To restrict or stop this bubbling or propagation, we use stopPropagation method.

    The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

    Lets take a simple example:
     

    <a href="" ng-click=callParent()>
        <span class="glyphicon glyphicon-ban-circle" ng-click=callChild($event)></span>
    </a>

    In the above code if we click outside the span,then callParent will be called. But if we click on the span, it will call ‘callChild’  and ‘callParent’ both because of the event propagation. So to avoid such condition, we would use event.stopPropagation.
     

    $scope.callChild = function($event) {
        // do something else
        $event.stopPropagation();
        $event.preventDefault();
    };

     In the above code, we have passed the $event parameter to both the functions. In Angular, ng-click scope exposes the $event  property, which is the DOM event being propagated. While stopPropagation will help to stop the propagation of the event to the parent, event.preventDefault will stop the default action of the event from happening.

    You can use these events simply like this or by creating a directive and attach it to the click where you need it. You can refer to following site:-
    http://benohead.com/angularjs-stopping-event-propagation-on-ng-click/

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: