evoke it logo white with clear backQuick Contact

Prevent Onclick Event Bubbling in JQuery

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 click on the child gives the following output:

First the child onclick event is called and then its’ 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 the same HTML element. Now only the child event is fired:

So hopefully now you have prevented onclick event bubbling on JQuery! Taaa-Dah!

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