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>


  • 相关阅读:
    UED
    内容分发网络CDN(互联网技术)
    分布式系统基础架构
    十六进制后按高低位分开(转)
    Kafka.net使用编程入门(二)
    Storm集成Kafka应用的开发
    .net 框架
    .NET 的 WebSocket 开发包比较(转)
    ASP.NET Web API上实现 Web Socket
    Scrapyd部署爬虫
  • 原文地址:https://www.cnblogs.com/July-/p/5800544.html
Copyright © 2011-2022 走看看