jQuery - 为什么委托传播，即使在调用`e.preventDefault`之后？

Question

我有一个带嵌套链接的div。 div为delegate提供'click'处理程序，警告“Div”。 div中的链接还有一个delegate 'click'处理程序，其中e.preventDefault();在警告“链接”之前被调用。当我点击链接时，我会看到“Div”警报和“Div”警报。我不清楚为什么会发生这种情况，因为我试图阻止链接点击处理程序的传播。

的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>

Answer 1

1. PreventDefault不会停止传播，它会停止采取默认操作。

2. 返回false / stopPropagation对委派/直播事件不起作用，因为当它到达定义事件的元素时，它已经传播了。它将停止传播到DOM中更高的元素，但不会阻止调用相同级别（或更低级别）的处理程序。请参阅http://api.jquery.com/delegate文档。

     

   由于.live（）方法在传播到的事件后处理它们   在文档的顶部，不可能停止传播   现场活动。同样，.delegate（）处理的事件也会传播   他们被委派的要素;事件处理程序绑定   DOM树下面的任何元素都已经被执行了   到调用委托事件处理程序时。这些处理程序，   因此，可能会阻止委托的处理程序触发   调用event.stopPropagation（）或返回false。

3. 如果您不希望运行相同级别/ DOM元素的其他处理程序，则可以使用stopImmediatePropagation。请注意，处理程序的应用顺序非常重要。

4. 您可能应该使用on()，而不是jQuery 1.7中的委托/直播。

Answer 2

您应该使用e.stopPropagation()来阻止您的活动冒泡