<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. springMVC之HttpServletRequest的getParameterMap()

    request.getParameterMap()的返回类型是Map类型的对象,也就是符合key-value的对应关系,但这里要注意的是,value的类型是String[],而不是String. 得到 ...

  2. 「LuoguP2420」 让我们异或吧（树上前缀和

    P2420 让我们异或吧-洛谷 题目描述 异或是一种神奇的运算,大部分人把它总结成不进位加法. 在生活中…xor运算也很常见.比如,对于一个问题的回答,是为1,否为0.那么: (A是否是男生 )xor ...

  3. 转C++的一点点

    为什么突然放些这么水的东西?我还是个C++小萌新,XD [一 litTLE经验值] 1. 注意 C++里 自带pow(x,y) 使用是没问题,尤其是pow(x,0.333333)这种时候很有用.但是 ...

  4. 洛谷p1007独木桥

    P1007独木桥 题目背景 战争已经进入到紧要时间.你是运输小队长,正在率领运输部队向前线运送物资.运输任务像做题一样的无聊.你希望找些刺激,于是命令你的士兵们到前方的一座独木桥上欣赏风景,而你留在桥 ...

  5. SIP协议&开源SIP服务器搭建和客户端安装

    1. SIP SIP 是一个应用层的控制协议,可以用来建立,修改,和终止多媒体会话,例如Internet电话 SIP在建立和维持终止多媒体会话协议上,支持五个方面: 1)   用户定位: 检查终端用户 ...

  6. Ubuntu下使用gcc编译c文件,未识别cos,sin

    Ubuntu下使用gcc编译c文件,虽然我调用了math.h的头文件,但是未识别cos,sin 报错:( fft.c ) /tmp/ccwXjD8C.o: In function `fft': fft ...

  7. git 的安装使用以及协作流程

    git安装: sudo apt-get install git-core git使用: 转:https://www.liaoxuefeng.com/wiki/0013739516305929606dd ...

  8. 移动端UI资源

    1.Flat UI Free http://designmodo.github.io/Flat-UI/ 2.POP 原型工具 http://mobilehub.io/products/pop 3.ei ...

  9. 图数据库初探之Neo4j

    图数据库初试之Neo4j 自从进入了移动互联网时代,各种新事物出现的速度都好像坐上了宇宙飞船,几乎隔几天一个新概念.就拿数据库而言,什么Oracle.DB2.SQL Server.MySQL,这些你都 ...

  10. ORA-22992:没法使用从远程表选择的LOB定位器

    OLB 问题 ORA-22992:没法使用从远程表选择的LOB定位器 Create global temporary table temp on commit preserve rows as sel ...