zoukankan      html  css  js  c++  java
  • js原生子级元素阻止父级元素冒泡事件

    <html>
     <head>
        <style type="text/css">
             #hide{
              75%;height:80px;background:skyblue;display:block;
             }
             .hander{cursor:pointer;}
             input{
              margin:5 0 0 900;
             }
        </style>
           <script>
            //不用window.onload也可以
          document.documentElement.onclick = function(){
           document.getElementById('hide').style.display = 'none';  
          }
         //阻止冒泡事件方法
         function stopPropagation(e) {  
          e = e || window.event;  
          if(e.stopPropagation) { //W3C阻止冒泡方法  
              e.stopPropagation();  
          } else {  
              e.cancelBubble = true; //IE阻止冒泡方法  
          }  
      }
      //方法必须要放在window.onload下
      window.onload = function(){
       document.getElementById("hide").onclick = function(e){
            stopPropagation(e);
          }
          document.getElementById('btn_show').onclick = function(e) {  
              document.getElementById('hide').style.display = 'block';  
              stopPropagation(e);  
       }
      }
      
          </script>
     </head>
     <body>
      <div id="hide" class="hander">click here nothing happen,you can click beside this area</div>
      <input type="button" id="btn_show" value="show" class="hander"/>
     </body>
    </html>
    

      

  • 相关阅读:
    java NIO 总结
    NIO 服务器和客户端 demo
    nio channel demo
    使用docker制作zookeeper镜像
    java BIO模型demo
    IDEA中语句添加try....catch..语句块
    线程的几种创建方式
    海豚调度Dolphinscheduler源码分析(四)
    @PostConstruct注解
    zookeeper常用命令
  • 原文地址:https://www.cnblogs.com/cyrfr/p/6706150.html
Copyright © 2011-2022 走看看