<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. Array 对象

    Array的对象用于在单个的变量中存储多个值. constructor 返回对创建此对象的数组函数的引用. demo: let arr=[];  arr.constructor==Array let ...

  2. HTML head元素

    head标签中可以包含的标签元素有: <title>:定义html页面的标题 <meta>: <meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解 ...

  3. React-Native 基本环境的搭建

    看了一些RN资料,仅仅了解到人们对 RN(以下简称 React_native 框架) 的使用描述以及评价,就觉得RN是一个很不错的框架,值得学习.今天就开始写我的学习记录,也给大家分享一下.下面进入正 ...

  4. Java--常识

    一:J2SE/J2ME/J2EE Java2平台包括:标准版(J2SE).企业版(J2EE)和微缩版(J2ME)三个版本.J2SE,J2ME和J2EE,这也就是SunONE(Open NetEnvir ...

  5. int和Integer及拆箱与装箱

    int和Integer 如果面试官问Integer与int的区别:估计大多数人只会说道两点,Ingeter是int的包装类,int的初值为0,Ingeter的初值为null.但是如果面试官再问一下In ...

  6. 别用visual editor了,用WindowBuilder

    以前利用 Eclipse Visual Editor 项目构建 GUI,现在用WindowBuilder吧. 官网说: The Visual Editor project has been archi ...

  7. HDU2594 【KMP】

    题意: 给两个字符串s1,s2,求最长的s1前缀匹配s2后缀的字符串,以及长度 思路: 利用KMP看下最终匹配到了哪个位置:一个是利用常规匹配,另一个是利用next数组的跳转. #include< ...

  8. C#中的yield return

    4.1 迭代器块 一个迭代器块(iterator block)是一个能够产生有序的值序列的块.迭代器块和普通语句块的区别就是其中出现的一个或多个yield语句. yield return语句产生迭代的 ...

  9. python 如何在 command 中能够找到 其他module

    部分代码如下: __author__ = 'norsd' # coding=utf8 # 上句说明使用utf8编码 try: import os import sys import time #关键语 ...

  10. PV(Pageviews)、访问(Visits)和访问者(Visitors)的区别

    1. 在GA上,每个页面每次加载将被记为一次PV.举例来说,一次用户访问页面顺序为:页面A->页面B->页面A,然后离开了你的站点,那这次用户访问(Visits)的PV总计为3次.   2 ...