Archer技术博客

之前在JS事件---冒泡与捕获相关的记录(一)记录了cancelBubble和stopPropagation的一些区别.stopPropagation(阻止传播)在事件绑定时分为了两种情况。一种是事件从父级dom开始,向子孙dom传播.一种是事件从子孙dom开始,向父级dom传播.非事件绑定的事件触发默认,只是响应子孙dom向父级dom的事件传播.(如下面这种情况)

<style>
    div{border:1px solid #000;width:100px; padding: 5px; overflow: hidden;}
</style>
    <div id="div1">
       div1
      <div id="div2">div2</div>
    </div>
    <script type="text/javascript">
     var oDiv1 = document.getElementById("div1");
     var oDiv2 = document.getElementById("div2");
     function fn1(ev){
         alert(this.id+":fn1");
     }
     function fn11(ev){
         alert(this.id+":fn11");
     }
     oDiv1.addEventListener("click",fn1,true);
     oDiv1.addEventListener("click",fn11,true);
     oDiv1.onclick = function(){
        alert(this.id+":onclick");
     }
     oDiv2.onclick = function(){
        alert(this.id+":onclick");
     }
    </script>

运行测试上面代码点击div2后,先触发了div1的fn1事件,然后是div1的fn11事件.接着触发了div2的onclick,接着事件又冒泡执行了div1的onclick事件.

如果给div2加上阻止传播,将会阻止由内而外的冒泡传播,(如下面的修改)

     <style>
    div{border:1px solid #000;width:100px; padding: 5px; overflow: hidden;}
</style>
    <div id="div1">
       div1
      <div id="div2">div2</div>
    </div>
    <script type="text/javascript">
     var oDiv1 = document.getElementById("div1");
     var oDiv2 = document.getElementById("div2");
     function fn1(ev){
         alert(this.id+":fn1");
     }
     function fn11(ev){
         alert(this.id+":fn11");
     }
     oDiv1.addEventListener("click",fn1,true);
     oDiv1.addEventListener("click",fn11,true);
     oDiv1.onclick = function(){
            alert(this.id+":onclick");
     }
     oDiv2.onclick = function(ev){
        ev.stopPropagation(); 
        alert(this.id+":onclick");
     }
    </script>

运行测试上面代码此时点击div2时,事件传播到div2上后就不再继续向外传播了.

我们再给父级div1的fn1函数加上阻止传播(如下面的修改)

 <style>
    div{border:1px solid #000;width:100px; padding: 5px; overflow: hidden;}
</style>
    <div id="div1">
       div1
      <div id="div2">div2</div>
    </div>
    <script type="text/javascript">
     var oDiv1 = document.getElementById("div1");
     var oDiv2 = document.getElementById("div2");
     function fn1(ev){
         ev.stopPropagation();
         alert(this.id+":fn1");
     }
     function fn11(ev){
         alert(this.id+":fn11");
     }
     oDiv1.addEventListener("click",fn1,true);
     oDiv1.addEventListener("click",fn11,true);
     oDiv1.onclick = function(){
            alert(this.id+":onclick");
     }
     oDiv2.onclick = function(ev){
        ev.stopPropagation(); 
        alert(this.id+":onclick");
     }
    </script>

运行测试上面代码此时点击div2时,事件执行到div1时就不继续向内传播了.但我们发现div1上绑定的两个事件都执行了.如果我们想让div1的fn1方法执行完毕后,不再执行div1上绑定的其它click函数,我们可以使用stopImmediatePropagation来替换stopPropagation.stopImmediatePropagation的意思是立即停止传播,包括同一dom的事件.

下面我们用stopImmediatePropagation替换stopPropagation(如下面的修改)

 <style>
    div{border:1px solid #000;width:100px; padding: 5px; overflow: hidden;}
</style>
    <div id="div1">
       div1
      <div id="div2">div2</div>
    </div>
    <script type="text/javascript">
     var oDiv1 = document.getElementById("div1");
     var oDiv2 = document.getElementById("div2");
     function fn1(ev){
         ev.stopImmediatePropagation();
         alert(this.id+":fn1");
     }
     function fn11(ev){
         alert(this.id+":fn11");
     }
     oDiv1.addEventListener("click",fn1,true);
     oDiv1.addEventListener("click",fn11,true);
     oDiv1.onclick = function(){
            alert(this.id+":onclick");
     }
     oDiv2.onclick = function(ev){
        ev.stopPropagation(); 
        alert(this.id+":onclick");
     }
    </script>

运行测试上面代码此时点击div2时,事件只执行到div1的fn1事件后就不再传播了.

经过这么一番折腾终于有点明白cancelBubble,stopPropagation,stopImmediatePropagation了.以上观点为个人观点和个人脑补的记录方式,欢迎交流指正 : )

欢迎转载:转载时请注明本文出处及文章链接