How to stop javascript bubbling of events?

Question

In my html code, I have a td tag that has an onclick event, and inside the td tag is an image tag that also has an onclick event. The problem is when I click the image, both its onclick and the td tag's onclick event occurs. How can I set it so that if I click the image tag, the td onclick event does not happen?

Note: It should work with IE8 and higher.

Thanks

http://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli — Ian, Aug 06 '13 at 19:53
Inside the onclick event for the image, use `event.stopPropagation();` — Steven Lambert, Aug 06 '13 at 19:54
[This answer](http://stackoverflow.com/a/6203135/218196) provides a solution without jQuery. — Felix Kling, Aug 06 '13 at 20:00

score 3 · Answer 1 · answered Aug 06 '13 at 19:53

3

Add this to the handler that shouldn't bubble:

e.stopPropagation()

assuming your handler takes an event parameter of e.

answered Aug 06 '13 at 19:53

Evan Davis

35,493
6
50
57

what if I have the code like: ``? How do I declare `e`? – omega Aug 06 '13 at 19:55
2

Don't write code like that. – Evan Davis Aug 06 '13 at 19:55
@omega: …and if you really needed, you could use the `event` variable which is available to inline event listeners – Bergi Aug 06 '13 at 19:56
Note that this won't work in IE8 and below. – Felix Kling Aug 06 '13 at 19:56
Oh forgot to mention, it needs to work in IE8 and higher. – omega Aug 06 '13 at 19:57
@omega: You should read http://www.quirksmode.org/js/events_early.html and http://www.quirksmode.org/js/events_order.html. – Felix Kling Aug 06 '13 at 19:58
@FelixKling I actually did not know that! Good note. [event.stopPropagation @ MDN](https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation) – Evan Davis Aug 06 '13 at 19:58

How to stop javascript bubbling of events?

1 Answers1