/    Sign up×
Community /Pin to ProfileBookmark

Why does this code not stop event propagation?

[CODE]
<!doctype html>
<html lang=”en”>
<head></head>
<body>
<script>

var calledEvent;

function stop(event)
{
alert( “Stopping” );
event.stopPropagation();
event.preventDefault();

calledEvent = event;
}

function notStopped(event)
{
alert( “Not Stopped: ” + ( event == calledEvent ) );
}

function addEvent(target, eventName, eventListener, stopBubbling)
{
if ( target.addEventListener ) target.addEventListener( eventName, eventListener, stopBubbling );
else if ( target.attachEvent ) return target.attachEvent( “on” + eventName, eventListener );
}

addEvent( document.body, “click”, stop );
addEvent( document.body, “click”, notStopped );

</script>

</body>
</html>
[/CODE]

The above code results in the the alerts:

“Stopping”

“Not Stopped: true”

So if it’s the same event, and they’re called in the right order, why isn’t it stopping propagation?

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@6tr6trauthorAug 06.2010 — OK, I figured it out (for Firefox so far):

Apparently, if the event is added to any element OTHER THAN the document.body, stopPropagation works perfectly. If the event is added to the document.body, then in firefox, you need to add the "stopBubbling" flag to make stopPropagation work.

So this will listen to stopProagation:

document.body.addEventListener( "click", myListener, true );

but this will NOT:

document.body.addEventListener( "click", myListener );

This seems to not be consistent (only tested in Firefox so far) though, as for any other element, stopPropagation will work even without the stopBubbling flag!
Copy linkTweet thisAlerts:
@Declan1991Aug 06.2010 — No, I think that's correct. [url=http://www.w3.org/TR/DOM-Level-3-Events/#events-event-type-stopImmediatePropagation]stopImmediatePropagation vs. stopPropagation[/url]. Also, there is no guarantee that notStopped will be called after stop, for the W3C model at least.

This is a very complicated area to implement cross-browser, as [url=http://www.quirksmode.org/js/introevents.html]Quirksmode[/url] can explain better than I can. Personally when working cross-browser, I always use the "element.onclick = " syntax, because it is widely supported.
×

Success!

Help @6tr6tr spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...