javascript - jQuery - why does delegate propagate, even after `e.preventDefault` is called? - Stack Overflow

admin管理员组

文章数量:1386760

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

Share Improve this question Follow edited May 19, 2014 at 13:11 orokusaki asked Nov 27, 2011 at 19:50 orokusakiorokusaki 57.3k6161 gold badges186186 silver badges263263 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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

本文标签： javascriptjQuerywhy does delegate propagateeven after epreventDefault is calledStack Overflow