zoukankan      html  css  js  c++  java
  • 冒泡现象和阻止事件冒泡2

    冒泡现象:触发某元素的某个时间触发其父级元素的对应时间,从元素本身向上冒泡到Dom顶层

    <body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
    <script>
      /*  冒泡现象——点击里面的div :会触发里面div的点击事件和其父级的点击事件*/
        window.onload=function(){
            var div1=document.getElementById("div1");
            var div2=document.getElementById("div2");
            var div3=document.getElementById("div3");
    
            div1.onclick=function(){
               alert(1)
            }
            div2.onclick=function(){
                alert(2)
            }
            div3.onclick=function(){
                alert(3)
            }
        }
    </script>
    </body>
    

      

     阻止事件冒泡
    <script>
      /*  冒泡现象——点击里面的div :会触发里面div的点击事件和其父级的点击事件*/
        window.onload=function(){
            var div1=document.getElementById("div1");
            var div2=document.getElementById("div2");
            var div3=document.getElementById("div3");
    
            div1.onclick=function( ){
               alert(1)
    
            }
            div2.onclick=function(){
                alert(2)
            }
            div3.onclick=function(ev){
                alert(3)
                var ev =event||window.event ;
                //阻止冒泡
                ev.stopPropagation();
                 /*    ev.cancelBubble = true;   */
    
            }
        }
    </script>


  • 相关阅读:
    结构体排序中sort的自定义函数cmp()
    c++中清空输入缓冲区的方法(做cf的时候炸了)
    求第k小的数
    数论—约数
    HDU递归求解专题练习
    62、rdp报表
    61、inputTree
    60、list集合的各种姿势的排序
    59、table移动高亮
    13、docker安装nginx
  • 原文地址:https://www.cnblogs.com/July-/p/5800544.html
Copyright © 2011-2022 走看看