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!