Stop javascript event propagation

Question

When you hover over one of the images on the following site a div appears with action buttons contained in it. When you click on the div a pop-up is meant to open, when you click on the child action buttons a different event is meant to happen.

At the minute the pop-up happens when you click on one of the div's child buttons. I tried to stop the event propagation using the code below.

http://penguinenglishlibrary.tumblr.com/

$(document).on('click', '#DOMWindow .like', function(event) {
    event.preventDefault();
    event.stopPropagation();

});

is there a reason you are overriding the document's event rather than the button's ? — Brandt Solovij
– Brandt Solovij, Commented Apr 11, 2012 at 21:10
@BrandtSolovij: Because that's how "live" or "delegated" events work. — gen_Eric
– gen_Eric, Commented Apr 11, 2012 at 21:11
@rocket im familiar but it seems like a performance sink that is unnecessary - perhaps the example is too brief to draw that conclusion accurately tho. — Brandt Solovij
– Brandt Solovij, Commented Apr 11, 2012 at 21:14

bfavaretto · Accepted Answer · 2012-04-13 04:14:21Z

4

You can't stop the propagation because the event is delegated. Do you really need the delegation, i.e., does #DOMWindow .like already exist at the time of the binding? In case it does, you can do like this:

$('#DOMWindow .like').on('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
});

Or, as I later said in the comments:

If you really need delegation, you can wrap your handler logic in an if that checkes if event.target is #DOMWindow .like. If it is, let the handler do its job, otherwise it means it's bubbling, so do nothing.

edited Apr 13, 2012 at 4:14

answered Apr 11, 2012 at 21:11

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Burt Over a year ago

It doesn't exist at the time of binding, is there any way of cancelling the event?

Brandt Solovij Over a year ago

bind the event when the object is created.

Valamas Over a year ago

I had the same response that it could not be done. Then someone provided and answer. See here: stackoverflow.com/questions/10082508/…

bfavaretto Over a year ago

If you really need delegation, you can wrap your handler logic in an if that checkes if event.target is '#DOMWindow .like'. If it is, let the handler do its job, otherwise it means it's bubbling, so do nothing.

bfavaretto Over a year ago

@Valamas, the jQuery docs says that wouldn't work either, but comments on the other thread imply otherwise. So yes, it's worth a try.

chepe263 · Accepted Answer · 2012-04-11 21:12:40Z

1

perhaps

jQuery('#DOMWindow .like').unbind('mouseenter mouseleave');

asuming you attached an event on jQuery(.selector').hover() it might work

answered Apr 11, 2012 at 21:12

chepe263

2,81224 silver badges39 bronze badges

Comments

gen_Eric · Accepted Answer · 2012-04-11 21:18:34Z

0

You cannot stop propagation with the way your event is bound. It's bound to document. Once the event hits document, it's bubbled to the top, and therefore can't be stopped because it's already propagated.

Try to bind the event to a parent element that's closer to .like, for example #DOMWindow. Note: the element you bind the event to must be in the DOM when this is called (and stay in the DOM).

$('#DOMWindow').on('click', '.like', function(event) {
    event.preventDefault();
    event.stopPropagation();
});

Check out this example I made: http://jsfiddle.net/QAZ3v/ It should show you what I mean.

answered Apr 11, 2012 at 21:18

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Comments

RestingRobot · Accepted Answer · 2012-04-11 21:47:28Z

According to the documentation for the on() function in jQuery,

By default, most events bubble up from the original event target to the document element. At each element along the way, jQuery calls any matching event handlers that have been attached. A handler can prevent the event from bubbling further up the document tree (and thus prevent handlers on those elements from running) by calling event.stopPropagation(). Any other handlers attached on the current element will run however. To prevent that, call event.stopImmediatePropagation(). (Event handlers bound to an element are called in the same order that they were bound.)

So it appears that

  event.stopImmediatePropagation();

is what you are looking for. Returning false may work as well, but I'm not quite sure.

source: http://api.jquery.com/on/

Edit: After testing both of my suggestions in a fiddle, it appears that neither work for click handlers. I'd be interested to know if they work for the on().

Collectives™ on Stack Overflow

Stop javascript event propagation

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related