How To Prevent Any Event Of Parent Element Using Javascript

Have you ever faced that If you have added any click event on the parent Element some where and Now you need to use same event with the child Element. and That event handler won’t work fine with the child Element?

Here I have mentioned example of HTML structure.

<div class="demo-wrapper">
  <div class="demo-wrap">
    <a href="#">Demo Text </a>
  </div>
</div>

Based on this example you have added any event handler let’s take click event for the “demo-wrap” for some other fulfillment.

And now you need to perform event handler for <a>.

It won’t work well because it will handle the event for the Parent Element.

To resolve that issue you can use “e.stopPropagation();”

jQuery( "a" ).click(function( e ) {
  e.stopPropagation();
  // Your code
});

This will prevent all other event handler with your parent so You can easily handle the event of the element.

I hope this article will help you to handle the iss