什么是JS事件冒泡？：

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理 程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。  

附一张图：

如何来阻止Js事件冒泡？

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>事件冒泡</title>

         <style type="text/css">

             #divOne{

                 width: 100px;

                 height: 100px;

                 border: 1px solid red;

             }

             #divTwo{

                 width: 200px;

                 height: 200px;

                 border: 1px solid red;

             }

         </style>

     </head>

     <body>

         <div id="divOne" onclick="alert('我是最外层');">

              <div id="divTwo" onclick="alert('我是中间层！')">

                  <a id="hr_three" href="http://www.baidu.com" onclick="alert('我是最里层！')">点击我</a>

              </div>

         </div>

     </body>

 </html>

比如上面这个页面，

分为三层：divOne是第外层，divTwo中间层，hr_three是最里层;

他们都有各自的click事件，最里层a标签还有href属性。

运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层---->然后再链接到百度.

这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。

事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。

如何来阻止冒泡?

event.stopPropagation();

 <script type="text/javascript">

 //.event.stopPropagation();

 window.onload = function (){

     var hr_three = document.getElementById('hr_three');

     hr_three.addEventListener('click',fn,false);

 }

 function fn(event){

     event.stopPropagation();

 }

 </script>

再点击“点击我”，会弹出：我是最里层，然后链接到百度

如何来阻止默认?

event.preventDefault();

<script type="text/javascript">

//2.event.preventDefault();

window.onload = function (){

    var hr_three = document.getElementById('hr_three');

    hr_three.addEventListener('click',fn,false);

}

function fn(event){

    event.preventDefault();

}

</script>

再点击“点击我”，会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度.

它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

什么是JS事件冒泡？的更多相关文章

  1. js事件冒泡和事件委托

    js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...

  2. 什么是JS事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...

  3. 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  4. js事件冒泡和捕捉

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  5. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  6. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

  7. js 事件冒泡、事件捕获、stopPropagation、preventDefault

    转自:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...

  8. JS事件冒泡及阻止

    事件冒泡及阻止 当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表 ...

  9. 关于JS 事件冒泡和onclick,click,on()事件触发顺序

    今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...

随机推荐

  1. Async和Await异步编程的原理

    1. 简介 从4.0版本开始.NET引入并行编程库,用户能够通过这个库快捷的开发并行计算和并行任务处理的程序.在4.5版本中.NET又引入了Async和Await两个新的关键字,在语言层面对并行编程给 ...

  2. Spring Bean详细讲解

    什么是Bean? Spring Bean是被实例的,组装的及被Spring 容器管理的Java对象. Spring 容器会自动完成@bean对象的实例化. 创建应用对象之间的协作关系的行为称为:装配( ...

  3. Intellij IDEA 13.1.3 使用Junit4

    作者QQ:1095737364   一.环境配置 安装JUnit插件步骤: File-->settings-->Plguins-->Browse repositories--> ...

  4. 游戏服务器菜鸟之C#初探四游戏服务

    经过多次折腾之后,在一次进行了一次重大的重构,去解决问题 主要重构如下 1.将原来的单一协议修改多协议进行,一些查询.认证的功能都采用HTTP进行,避免全部采用TCP链接资源的消耗: 2.原来单一的部 ...

  5. Git : SSH 协议服务器

    SSH 协议用于为 Git 提供远程读写操作,是远程写操作的标准服务. SSH协议语法格式 对于拥有 shell 登录权限的用户账号,可以用下面的语法访问 Git 版本库: 语法 1 : ssh:// ...

  6. Git异常：fatal: could not create work tree dir 'XXX': No such file or directory

    GitHub实战系列汇总:http://www.cnblogs.com/dunitian/p/5038719.html ———————————————————————————————————————— ...

  7. GroupData群数据库的还原与优化

    一.背景 这个数据库的数据文件mdf大概有83G左右,当还原数据库之后感觉可以做很多性能方面上的调优,合并数据后mdf数据文件大概有59G左右,行压缩后mdf数据文件大概有39G左右,页压缩后mdf数 ...

  8. 【.net 深呼吸】自定义缓存配置（非Web项目）

    在前一篇烂文中,老周简单讲述了非Web应用的缓存技术的基本用法.其实嘛,使用系统默认方案已经满足我们的需求了,不过,如果你真想自己来配置缓存,也是可以的. 缓存的自定义配置可以有两种方案,一种是用代码 ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（38）-Easyui-accordion+tree漂亮的菜单导航

    系列目录 本节主要知识点是easyui 的手风琴加树结构做菜单导航 有园友抱怨原来菜单非常难看,但是基于原有树形无限级别的设计,没有办法只能已树形展示 先来看原来的效果 改变后的效果,当然我已经做好了 ...

  10. 计算机程序的思维逻辑 (30) - 剖析StringBuilder

    上节介绍了String,提到如果字符串修改操作比较频繁,应该采用StringBuilder和StringBuffer类,这两个类的方法基本是完全一样的,它们的实现代码也几乎一样,唯一的不同就在于,St ...