<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#div1 {width:100px; height:200px; border: 1px solid red; display: none;}

</style>

点击按钮显示div1,点击按钮其余地方隐藏div1,点击按钮其余地方会因为冒泡触发document的点击事件所以这里只需要写document的点击事件隐藏div1就可以实现点击其余地方都让div1隐藏。

<script>

window.onload = function() {

    /*

事件冒泡：点击子级元素接收到事件后，会把他接收到的事件传播给他的父级，也就是父级也会接收到子级的事件，一直到document,window。

调用var ev=ev||event,ev.cancelBubble=false阻止向父类冒泡，

    阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;

    */

    var oBtn = document.getElementById('btn');

    var oDiv = document.getElementById('div1');

    oBtn.onclick = function(ev) {

        var ev = ev || event;

        ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡,不出发document的点击事件又让div1隐藏了。

        oDiv.style.display = 'block';

    }

    document.onclick = function() {//点击p也会出发document点击事件因为冒泡，实现点击非按钮任意地方让div1的隐藏。

        /*setTimeout(function() {

            oDiv.style.display = 'none';

        }, 1000);*/

        oDiv.style.display = 'none';

    }

}

</script>

</head>

<body>

    <input type="button" value="按钮" id="btn" />

    <div id="div1"></div>

    <p>ppppp</p>

    <p>ppppp</p>

    <p>ppppp</p>

    <p>ppppp</p>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}

#div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;}

</style>

<script>

window.onload = function() {

    //只需要对div1加事件，因为div2接收到事件会冒泡传递给div1。

    var oDiv = document.getElementById('div1');

    oDiv.onmouseover = function() {

        this.style.left = '0px';

    }

    oDiv.onmouseout = function() {

        this.style.left = '-100px';

    }

}

</script>

</head>

<body>

    <div id="div1">

        <div id="div2">分享到</div>

    </div>

</body>

</html>

js html 事件冒泡的更多相关文章

  1. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  2. vue.js阻止事件冒泡和默认事件

    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...

  3. js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧   1. event.prev ...

  4. js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获

    js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...

  5. js的事件冒泡机制

    js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document这个根节点这里.js的事件冒泡机制,就像是一个水泡在水底下,冒泡到水面的过程. 摘自醉清玄

  6. JS阻止事件冒泡

    在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡.(李昌辉) <div id="wai"> < ...

  7. js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

    preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...

  8. js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  9. JS中 事件冒泡与事件捕获

    [JS中的事件流]  1.事件冒泡:当某DOm元素触发一种事件时,会从当前节点开始,逐级往上触发其祖先节点的同类型事件,直到DOM根节点:   >>>什么情况下会产生事件冒泡 ① D ...

  10. js中事件冒泡，事件捕获详解

    一.事件流 事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段.目标阶段和冒泡阶段. 如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原 ...

随机推荐

  1. 在Windows系统下搭建Redis集群

    准备工作 需要4个部件:Redis.Ruby语言运行环境.Redis的Ruby驱动redis-xxxx.gem.创建Redis集群的工具redis-trib.rb.使用redis-trib.rb工具来 ...

  2. 葡萄城公布新版ActiveReports 9报表控件和报表server

    2014年11月10日---葡萄城宣布正式公布ActiveReports9,包含了三种报表模型:RDL报表.页面报表.区域报表.对于ActiveReports中的这个最新版本号中,我们专注于提高产品的 ...

  3. Activity嵌套多个Fragment实现横竖屏切换

    一.上图 二.需求 最近项目遇到个横竖屏切换的问题.较为复杂.在此记之. 1.Activity中竖屏嵌套3个Fragment,本文简称竖屏FP1,FP2,FP3. 2.当中竖屏FP1与FP2能够切换为 ...

  4. NOIP2017提高组模拟赛4 （总结）

    NOIP2017提高组模拟赛4 (总结) 第一题 约数 设K是一个正整数,设X是K的约数,且X不等于1也不等于K. 加了X后,K的值就变大了,你可以重复上面的步骤.例如K= 4,我们可以用上面的规则产 ...

  5. Composer使用实践

    Composer 是 PHP5.3以上 的一个依赖管理工具.它允许你声明项目所依赖的代码库,它会在你的项目中为你安装他们. 地址在这里 库地址 这里相当于php应用商店,存放着很多库. 这些库,基本上 ...

  6. BZOJ 2127 二元关系

    题意: 思路: 先把所有的值加起来 最小割割哪儿 就代表那个地方不选 一减 剩下的就是 最大值了 //By SiriusRen #include <cstdio> #include < ...

  7. .net中MVC Webapi多参数调用控制器方法

    http://blog.csdn.net/wulex/article/details/71545471 路由 public static void Register(HttpConfiguration ...

  8. 洛谷P1339 [USACO09OCT]热浪Heat Wave(最短路)

    题目描述 The good folks in Texas are having a heatwave this summer. Their Texas Longhorn cows make for g ...

  9. Servlet学习(八)——Session

    1.Session技术 Session技术是将数据存储在服务器端的技术,会为每个客户端都创建一块内存空间存储客户的数据,但客户端需要每次都携带一个标识ID去服务器中寻找属于自己的内存空间.所以说Ses ...

  10. CDR都特价了，你还用破解版？

    目前,CDR X6特价活动,从18的年的元旦一直持续到现在,真可谓是痛快淋漓,大喜若狂,但是,似乎好像是....这么强有力的活动马上就要告一段落了,因为限量1000 套的抢购要卖!完!了!难不难过,痛 ...