event.stopImmediatePropagation()与event.isPropagationStopped()对比
event.stopPropagation();阻止事件冒泡。
event.stopImmediatePropagation(); 阻止事件冒泡并且阻止该元素上同事件类型的监听器被触发。
下面通过案列说明:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").click(function(event){
alert("div模块被执行");
event.stopImmediatePropagation();
});
$("span").click(function(event){
alert("span模块被执行");
});
$("div").click(function(event){
alert("div模块被执行");
});
$("div").click(function(event){
alert("div模块被执行");
});
});
</script>
</head>
<body>
<div style="height:100px;width:300px;padding:10px;border:1px solid blue;background-color:lightblue;">
测试1
<span>测试2</span>
</div>
<p>由于 event.stopImmediatePropagation()第三个div和第四个事件div不会被执行
event.stopPropagation()设置后点击span时,包括span的div不会被执行,不然会
先执行span然后会执行身为父元素的div
</body>
</html>
如果不设置event.stopImmediatePropagation(),结果会出现像下图三次一样的弹窗
原因:由于没设置event.stopImmediatePropagation(),所有执行第一个div后会执行下面剩下的两个div
如果不设置event.stopPropagation(),结果会出现像下图:
原因:由于没设置event.stopPropagation(),所以点击span执行后会自动继续执行点击包裹span的父元素div的这种默认行为