I have a div with a nested link. The div has a delegate handler for 'click', which alerts "Div". The link within the div also has a delegate handler for 'click' wherein e.preventDefault(); is called before alerting "Link". When I click the link, I see the "Div" alert, and the "Div" alert. I'm unclear why this is happening since I'm attempting to stop propagation from the link's click handler.

JavaScript

$('body').delegate('.outer', 'click', function(e){
    e.preventDefault();
    alert('Div');
});

$('body').delegate('.outer a', 'click', function(e){
    e.preventDefault();
    alert('Link');
    // Note: I've also tried returning false (vs using preventDefault), per the docs
});

HTML

<div class="outer">
    <a href="#">Click me</a>
</div>

I have a div with a nested link. The div has a delegate handler for 'click', which alerts "Div". The link within the div also has a delegate handler for 'click' wherein e.preventDefault(); is called before alerting "Link". When I click the link, I see the "Div" alert, and the "Div" alert. I'm unclear why this is happening since I'm attempting to stop propagation from the link's click handler.

JavaScript

$('body').delegate('.outer', 'click', function(e){
    e.preventDefault();
    alert('Div');
});

$('body').delegate('.outer a', 'click', function(e){
    e.preventDefault();
    alert('Link');
    // Note: I've also tried returning false (vs using preventDefault), per the docs
});

HTML

<div class="outer">
    <a href="#">Click me</a>
</div>

• javascript
• jquery

2 Answers 2

1. PreventDefault doesn't stop propagation, it stops the default action from being taken.

2. Returning false/stopPropagation doesn't work on delegated/live events because by the time it reaches the element on which the event is defined, it has already propagated up. It will stop propagation to elements higher in the DOM, but not prevent handlers at the same level (or lower) from being invoked. See this from the http://api.jquery./delegate documentation.

   Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.

3. If you don't want the other handlers at the same level/DOM element to run, you can use stopImmediatePropagation. Note that the order in which the handlers are applied is important.

4. You should probably be using on(), instead of delegate/live as of jQuery 1.7.

You should use e.stopPropagation() to stop your event from bubbling up