DOM Level 0 event: how to prevent the outer click from firing?

Question

Check the following code:

<div onclick="alert('Hi, from outer div!');">
    <button onclick="alert('Hi, from button!');">Tha button</button>, Click me!
</div>

Is there a way to prevent the outer div from firing an onclick when I click the button? Any idea how to cancel DOM level 0 events?

Note: I can't use jQuery. It needs to work on Chrome, FireFox, IE6-9.

you might wanna [read this](http://www.quirksmode.org/js/events_order.html) for starters — Joseph, Mar 30 '12 at 09:42
possible duplicate of [Prevent parent container click event from firing when hyperlink clicked](http://stackoverflow.com/questions/1997084/prevent-parent-container-click-event-from-firing-when-hyperlink-clicked) ... look at the highest voted answer instead of the selected one (if you are not using jQuery). — Felix Kling, Mar 30 '12 at 09:42
@FelixKling, I'm using level 1 dom events without handlers, that might be a big difference... — Kees C. Bakker, Mar 30 '12 at 09:43
You are using handlers, what do you think the code in `onclick` is? Have you tried it at all? — Felix Kling, Mar 30 '12 at 09:45

T.J. Crowder · Accepted Answer · 2012-03-30T11:00:31.413

Yes. In most standard browsers, you call stopPropagation on the event object (live example | source):

<div onclick="alert('Hi, from outer div!');">
    <button onclick="alert('Hi, from button!'); event.stopPropagation();">Tha button</button>, Click me!
</div>

In older copies of IE, you have to set the cancelBubble property to true instead:

<div onclick="alert('Hi, from outer div!');">
    <button onclick="alert('Hi, from button!'); event.cancelBubble = false;">Tha button</button>, Click me!
</div>

...which means for broad compatibility you have to test which you're dealing with, which gets ugly (live example | source):

<div onclick="alert('Hi, from outer div!');">
    <button onclick="alert('Hi, from button!'); if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; }">Tha button</button>, Click me!
</div>

These sorts of differences are why I always recommend moving away from the old DOM0-style handler and using a decent JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others. These smooth over differences between browsers and provide a huge amount of utility functionality.

For example, with jQuery, this HTML:

<div id="theDiv">
    <button id="theButton">Tha button</button>, Click me!
</div>

...and this script (live example | source):

$("#theDiv").click(function() {
    alert('Hi, from outer div!');
});
$("#theButton").click(function(event) {
    alert('Hi, from button!');
    event.stopPropagation(); // Even on IE, jQuery provides this
});

Or frequently with jQuery, you see people just doing return false; in their event handler. return false; in a handler, in jQuery, does two things: Stops propagation, and prevents any default action the event might have had (for instance, in a click handler on a link). stopPropgation doesn't prevent the default.

But this isn't meant to be an advertisement for jQuery (though it is a very good library overall). Closure, YUI, Prototype, and all the others have similar functionality for letting you not worry about these sorts of browser incompatibilities.

@KeesC.Bakker: IE6 and IE7 definitely don't have `stopPropagation`. I don't remember whether IE8 does. IE9, IE10, and up do. — T.J. Crowder, Mar 30 '12 at 09:50
@T.J.Crowder, Any idea how can I get the stopPropagation to work in earlier browsers? — Kees C. Bakker, Mar 30 '12 at 09:55
@Kees: It should be `event.cancelBubble = false` (as shown in the question I linked to as duplicate ;)). — Felix Kling, Mar 30 '12 at 10:12
@KeesC.Bakker: This is why I use a library. Fixed (`returnValue` = `preventDefault()`; `cancelBubble` = `stopPropagation()`). — T.J. Crowder, Mar 30 '12 at 10:55

score 0 · Answer 2 · answered Mar 30 '12 at 09:42

0

<div onclick="alert('Hi, from outer div!');">
    <button onclick="event.stopPropagation(); alert('Hi, from button!');">Tha button</button>, Click me!
</div>

What I added was an event.stopPropagation(); What this does is that is stops the bubbling from occurring

answered Mar 30 '12 at 09:42

Rick Hoving

3,585
3
29
49

@KeesC.Bakker: In this context, yes; but `event.stopPropgation()` does not, older versions of IE don't have it. – T.J. Crowder Mar 30 '12 at 09:46

DOM Level 0 event: how to prevent the outer click from firing?

2 Answers2