stopImmediatePropagation函数和stopPropagation函数的区别
自己的代码测试
<div id="content">
<div id = "div1">
<button id = "button1">测试按钮</button>
</div>
</div>
<script type="text/javascript">
var content=document.getElementById('content');
var div = document.getElementById("div1");
div.addEventListener("click" ,function(){console.log("第一次执行");});//第一次执行
div.addEventListener("click" , function(){console.log("第二次执行");});//第二次执行
content.addEventListener("click" , function(){console.log("冒泡content执行");});//冒泡content执行
</script>
测试一:stopPropagation
div.addEventListener("click" ,function(e){console.log("第一次执行");e.stopPropagation()});
div.addEventListener("click" , function(){console.log("第二次执行");});
content.addEventListener("click" , function(){console.log("冒泡content执行");});
结果阻止div1往content冒泡,不影响第二个事件的执行,虽然第二个事件可以冒泡,但是总的阻止了当前元素的冒泡;
结论阻止当前对象的传播(冒泡),不影响同一对象上的其他事件处理程序
测试二:stopImmediatePropagation
div.addEventListener("click" ,function(e){console.log("第一次执行");e.stopImmediatePropagation()});
div.addEventListener("click" , function(){console.log("第二次执行");});
div.addEventListener("click" , function(){console.log("第三次执行");});
content.addEventListener("click" , function(){console.log("冒泡content执行");});
结果阻止div1往content冒泡,影响其后续事件的执行;
div.addEventListener("click" ,function(){console.log("第一次执行");});
div.addEventListener("click" , function(e){console.log("第二次执行");e.stopImmediatePropagation()});
div.addEventListener("click" , function(){console.log("第三次执行");});
content.addEventListener("click" , function(){console.log("冒泡content执行");});
结果阻止div1往content冒泡,影响其后续事件的执行,之前事件不影响执行;
结论阻止当前对象的传播(冒泡),只会影响该对象上设置冒泡事件的后续事件处理程序