<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. java+poi实现word转html显示

    直入正题,需求为页面预览word文档,用的是poi3.8,以下代码支持表格.图片,不支持分页,只支持doc,不支持docx: 1.导jar包 2.java文件 /** * */ import java ...

  2. python2代码批量转为python3代码

    由于python存在python2和python3两个主要的版本方向,经常会有将python2的代码转到python3的环境下运行的需求.尤其是跑一些神经网络的代码时有很多是在python2的环境下写 ...

  3. NHibernate错误：Could not compile the mapping document的解决

    用动软代码生成器的NHibernate生成模板,生成一个“XML映射模板”,老是提示Could not compile the mapping document的问题. 各种的找,就是没找到问题. 后 ...

  4. 【222】◀▶ IDL 输入输出函数说明

    参考:I/O - General Input/Output Routines —— 基本输入输出函数 01   PRINT/PRINTF 格式化输出. 02   READ/READF 格式化输入. 0 ...

  5. UVa 10213 How Many Pieces of Land ? (计算几何+大数)

    题意:一块圆形土地,在圆周上选n个点,然后两两连线,问把这块土地分成多少块? 析:这个题用的是欧拉公式,在平面图中,V-E+F=2,其中V是顶点数,E是边数,F是面数.对于这个题只要计算V和E就好. ...

  6. 执行多个Sql脚本,Sqlplus

    1.先制作需要执行的Sql文件list CMD 中输入[dir E:\FolderName >E:\ExcuteSqlList.txt ] 2.根据ExcuteSqlList.txt 中的文件名 ...

  7. C#操作cmd

    C#经常操作CMD,使用的话就用下面的2和3进行整理一下使用吧. 1.简单的调用命令不需要回传数据,最简单 public static void ipcmd(object p) { Process p ...

  8. HDU5122【水】

    题意: 有n个数,然后按照冒泡排序的手段,只能往后移,然后问你最小几轮可以实现1-n 思路: 后边有比他小的数的话就一定要到后面去 求一下有多少个 PS: 如果还可以往前移,那么我们可以求一个最大确定 ...

  9. Codevs 1018 单词接龙

    1018 单词接龙 2000年NOIP全国联赛普及组NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描 ...

  10. 稳定UI运行结果-自动化测试失败重试和截图

    运行自动化测试的时候,有时会因为网络不稳定,测试环境或者第三方环境正在重启而造成用例运行结果不稳定,时而能跑过时而跑不过.这些难以重现的环境因素造成的用例失败会让测试人员很困扰,排查即耗费时间也没有太 ...