js原生子级元素阻止父级元素冒泡事件

最新推荐文章于 2024-06-20 12:54:15 发布

qq_29069777

最新推荐文章于 2024-06-20 12:54:15 发布

阅读量244

点赞数

分类专栏：前端文章标签：前端html

原文链接：https://www.mk2048.com/blog/blog.php?id=hh2i1jk01hcb&title=js%E5%8E%9F%E7%94%9F%E5%AD%90%E7%BA%A7%E5%85%83%E7%B4%A0%E9%98%BB%E6%AD%A2%E7%88%B6%E7%BA%A7%E5%85%83%E7%B4%A0%E5%86%92%E6%B3%A1%E4%BA%8B%E4%BB%B6

版权

前端专栏收录该内容

1175 篇文章 2 订阅

订阅专栏

<html>
 <head>
    <style type="text/css">
         #hide{
          width: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>

更多专业前端知识，请上【猿2048】www.mk2048.com