CODEWITHSUNDEEP
javascriptjqueryevents
Burt
Burt

Reputation: 7758

Stop javascript event propagation

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();

});

Upvotes: 1

Views: 463

Answers (4)

bfavaretto
bfavaretto

Reputation: 71908

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.

Upvotes: 4

RestingRobot
RestingRobot

Reputation: 2978

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().

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227200

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.

Upvotes: 0

chepe263
chepe263

Reputation: 2812

perhaps 

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

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

Upvotes: 1

Related Questions