<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>

　　

js原生子级元素阻止父级元素冒泡事件的更多相关文章

  1. Jquery遍历之获取子级元素、同级元素和父级元素

    Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...

  2. js input复选框选中父级同时子级也选中

    js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...

  3. html css样式子元素相对父级元素定位

    废话不多说. 父级元素 样式设置: position:relative; 子元素样式: position: absolute; 这样就可以达到子元素相对父级元素定位了.

  4. WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象

    原文:WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象 简介 本文将完整叙述我利用VisualTreeHelper实现题述功能的全部过程,想直接看函数实现的朋友可以跳到函数 ...

  5. 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理

    今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...

  6. JS获取节点的兄弟，父级，子级元素

    https://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作 ...

  7. jQuery使用（四）：DOM操作之查找兄弟元素和父级元素

    查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...

  8. jquery获取元素（父级的兄弟元素的子元素）

    一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...

  9. jq点击元素删除父级

    首先要能找到父级:需要操作的dom结构如下: <tbody> <tr> <td>星期一早起</td> <td class="status ...

随机推荐

  1. C++之运算符重载（前置++和后置++）

    今天在阅读<google c++ 编程风格>的文档的时候,5.10. 前置自增和自减:有一句话引起了我的注意: 对于迭代器和其他模板对象使用前缀形式 (++i) 的自增, 自减运算符.,理 ...

  2. 如何正确遍历删除List中的元素，你会吗？

    遍历删除List中的元素有很多种方法,当运用不当的时候就会产生问题.下面主要看看以下几种遍历删除List中元素的形式: 1.通过增强的for循环删除符合条件的多个元素 2.通过增强的for循环删除符合 ...

  3. could not get wglGetExtensionsStringARB

    第一种解释: 现象: 启动应用程序时,在Emulator中,提示"could not get wglGetExtensionsStringARB". 原因分析: device sp ...

  4. Unity3D 开发ios时困扰多时游戏开始画面图片的分辨率

  5. hue集成各种组件

    一.Hue安装 可以编译安装,我这里有已经编译好的,直接解压使用: hue默认端口:8888 http://gethue.com/ https://github.com/cloudera/hue ht ...

  6. UVaLive 3902 Network (无根树转有根树，贪心)

    题意:一个树形网络,叶子是客户端,其他的是服务器.现在只有一台服务器提供服务,使得不超k的客户端流畅,但是其他的就不行了, 现在要在其他结点上安装服务器,使得所有的客户端都能流畅,问最少要几台. 析: ...

  7. iOS QQ 登录

    QQSDK 看官网的文档,确实让人头疼的一件事,说是两个资源文件,就找到了一个(TencentOpenAPI.framework),Demo中也没有找到. 接下来具体实现: 导入库: 添加SDK依赖的 ...

  8. LightOJ1197【数学】

    引自:WONTER 题意: 给你两个数,a,b,让你求区间[a,b]里面有多少个素数: 思路: 首先要知道,我们要想筛 [1, b] 中所有的素数,只需要用到 [1, sqrt(b)] 中的所有素数来 ...

  9. c# 添加reference后，Visual Studio 仍然提示无法找到函数, 询问是否添加了含有这个函数的Assembly

    1.问题 添加reference后,编译仍然无法通过,测试工程添加这个assembly 就可以编译通过. 对比了这个assembly的 .net 版本,也没问题 由于工程是x64的, 添加的assem ...

  10. 洛谷P2473 [SCOI2008]奖励关（期望+状压）

    传送门 我数学期望还是太差了…… 先考虑状压模型,设$dp[i][S]$表示第$i$轮,当前宝物状态为$S$,能获得的最大期望分数 然而这个模型有一个问题,第$i$轮不一定能达到状态$S$ 那么考虑转 ...