<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. JNI之JAVA调用C++接口

    1.JNI定义(来自百度百科) JNI是Java Native Interface的缩写,中文为JAVA本地调用.从Java1.1开始,Java Native Interface(JNI)标准成为ja ...

  2. ubuntu 使用命令行清空回收站

    sudo rm -rf ~/.local/share/Trash/*

  3. 实用的MVVM：ImageView

    最近在学习WPF,遇到一本入门好书,推荐给大家<Windows Presentation Foundation 4.5 Cookbook> 做项目首先要从MVVM开始,现在把他的Simpl ...

  4. Python之线程与GIL

    前言            以下内容是个人学习之后的感悟,转载请注明出处~ 线程是什么 线程是程序中一个单一的顺序控制流程.进程内一个相对独立的.可调度的执行单元,是系统独立调度和分派CPU的 基本单 ...

  5. Eigen中的noalias()： 解决矩阵运算的混淆问题

    作者:@houkai本文为作者原创,转载请注明出处:http://www.cnblogs.com/houkai/p/6349990.html 目录 混淆例子解决混淆问题混淆和component级的操作 ...

  6. python之log日志模块

    logging的配置大致有下面几种方式. 1.        通过代码进行完整配置,logging.getLogger()获取logger后,给logger设置各种handler. 2.       ...

  7. linux中的调试知识---基础gdb和strace查看系统调用信息，top性能分析，ps进程查看，内存分析工具

    1 调试一般分为两种,可以通过在程序中插入打印语句.有点能够显示程序的动态过程,比较容易的检查出源程序中的有关信息.缺点就是效率比较低了,而且需要输入大量无关的数据. 2 借助相关的调试工具. 3 有 ...

  8. 【Linux学习】Linux用户管理2—用户配置文件

    Linux用户管理2-用户配置文件 /etc/passwd: 存放系统用户的文件 输入 vi /etc/passwd /etc/shadow: 保存保密文件 /etc/group: 群组文件 输入 v ...

  9. Eclipse+Maven+TestNg+ReportNg 生成测试报告

    http://blog.csdn.net/a542551042/article/details/46729585

  10. man帮助的使用

    本篇博文转自Linux社区,谨在此记录使用: ——————Linux系统man帮助的使用技巧———————— man的查询后面的数字含义:1用户在shell换机中可以操作的指令或可执行文件2系统核心可 ...