自己的代码测试

<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冒泡，影响其后续事件的执行，之前事件不影响执行；

结论阻止当前对象的传播（冒泡），只会影响该对象上设置冒泡事件的后续事件处理程序