时间戳

首页 > 解决方案 > Jquery stopPropagation 不工作，两种情况

javascript - Jquery stopPropagation 不工作，两种情况

问题描述

$(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() 在第一种情况下工作，但在第二种情况下不工作？

标签： javascriptjquerystoppropagation

解决方案

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

.outer但是，它在冒泡时被事件处理程序捕获，这是在stopPropagation()调用之前。

推荐阅读