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

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