jQuery stopPropagation 方法无效的两种情况

Question

$(document).on('click', '.outer1', function(){
    alert('outer click event');
})

$(document).on('click', '.inner1', function(e){
    e.stopPropagation();
    alert('inner click event');
})

$('.outer2').on('click', function(){
    alert('outer click event');
})

$(document).on('click', '.inner2', function(e){
    e.stopPropagation();
    alert('inner click event');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer1">
   <div class="inner1"> Case 1 - Click Here</div>
</div>


<div class="outer2">
   <div class="inner2"> Case 2 - Click Here</div>
</div>

例如，模态窗口：

<div class="outer">
   <div class="inner"></div>
</div>

第一个案例：

$(document).on('click', '.outer', function(){
    alert('outer click event');
})

$(document).on('click', '.inner', function(e){
    e.stopPropagation();
    alert('inner click event');
})

第二种情况：

$('.outer').on('click', function(){
    alert('outer click event');
})

$(document).on('click', '.inner', function(e){
    e.stopPropagation();
    alert('inner click event');
})

有什么不同吗？为什么stopPropagation()在第一种情况下无法正常工作，但在第二种情况下可以正常工作呢？

- Fel AA

---

@Rory McCrossan 给出了正确的答案。如果您想使用第二种情况，则必须使用 $('.inner').on('click', function(e){ 而不是 $(document).on('click', '.inner', function(e){。 - Sachin

Answer 1

后者不起作用是因为事件需要从 .inner 冒泡到 document 才能被委托事件处理程序捕获。

然而，在冒泡过程中，它会被 .outer 上的事件处理程序捕获，这是在调用 stopPropagation() 之前发生的。

- Rory McCrossan

---

换句话说，第二个参数只是事件冒泡时的过滤器，而不是附有侦听器的元素。 - Ben Steward