evoke it logo white with clear backQuick Contact

How to Prevent Onclick Event Bubbling in JQuery

How to Prevent Onclick Event Bubbling in JQuery

Onclick is much outdated now, but if you find yourself stuck in a position where you have to use it, then it’s worth considering the following when you have elements with child elements also using onclick.Consider the following code:

You can see that div1 has an onclick function called parentFunction() passing itself as the parameter.Loading this HTML file and then clicking on the child gives the following output:

 

First the child onclick event is called and then it’s parents onclick event is called, which is not desired.To stop this from occurring, in your child function add the following line:

stopPropagation will prevent parent onclicks from calling, but keep in mind that this method will not work to stop events from firing on the same HTML element.Now only the child event is fired:

Be the First to Get Our Ebook
Microsoft SharePoint 2019

What you need to know!

Back To The BlogContact Support

View Post's Via Catagory

IT support laptop image
Software Development cloud image
Terms & ConditionsPrivacy PolicyDeveloped by Evoke IT