gpt4 book ai didi

javascript - Jquery stopPropagation 不起作用,两种情况

转载 作者:行者123 更新时间:2023-11-29 15:12:55 25 4
gpt4 key购买 nike

$(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() 在第一种情况下有效,但在第二种情况下无效?

最佳答案

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

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

关于javascript - Jquery stopPropagation 不起作用,两种情况,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52424016/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com