Jquery stopPropagation 不起作用,两种情况
Jquery stopPropagation not working, two cases
$(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>
例如模态window:
<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
才能被委派的事件处理程序捕获。
但是,它在 .outer
上被事件处理程序捕获,因为它冒泡了,这是 在 调用 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>
例如模态window:
<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
才能被委派的事件处理程序捕获。
但是,它在 .outer
上被事件处理程序捕获,因为它冒泡了,这是 在 调用 stopPropagation()
之前。