Js冒泡机制是指如果某元素定义了事件A，如click事件，如果触发了事件之后，没有阻止冒泡事件，那么事件将向父级元素传播，触发父类的click函数。 
如下例所示：

<html> 
    <script type="text/javascript" src="jquery-1.7.1.js"></script> 
    <script> 
    function ialertdouble(e) { 
    alert('innerdouble'); 
    stopBubble(e); 
    } 
     
    function ialertthree(e) { 
    alert('innerthree'); 
    stopBubbleDouble(e); 
    } 
     
    function stopBubble(e) { 
    var evt = e||window.event; 
    evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡 
    } 
     
    function stopBubbleDouble(e) { 
    var evt = e||window.event; 
    evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡 
    evt.preventDefault();//阻止浏览器默认行为，这样链接就不会跳转 
    } 
     
    $(function() { 
    //方法一 
    //$('#jquerytest').click(function(event) { 
    // alert('innerfour'); 
    // event.stopPropagation(); 
    // event.preventDefault(); 
    //}); 
     
    //方法二 
    $('#jquerytest').click(function() { 
    alert('innerfour'); 
    return false; 
    }); 
    }); 
    </script> 
    <div onclick="alert('without');">without 
    <div onclick="alert('middle');">middle 
    <div onclick="alert('inner');">inner</div> 
    <div onclick="ialertdouble(event)">innerdouble</div> 
    <p><a href='http://www.baidu.com' onclick="ialertthree(event)">innerthree</a></p> 
    <p id='jquerytest'><a href='http://www.baidu.com'>innerfour</a></p> 
    </div> 
    </div> 
    </html>

当你点击inner的时候，会依次弹出‘inner’，‘middle’和‘without’。这就是事件冒泡。

从直观上来看，也是这样的，因为最里层的区域是在父级节点中的，点击了子级节点的区域，其实也是点击了父级节点的区域，所以事件会传播起来。

其实，很多的时候，我们并不想事件冒泡，因为这样会同时触发几个事件。

接下来：我们点击innerdouble。就会发现她并没有冒泡，因为她在调用的方法ialertdouble()中调用了stopBubble()方法，方法通过判断浏览器类型（Ie通过cancleBubble() 、firefox通过stopProgation()）来阻止冒泡。

但如果是链接的话，我们会发现她也会阻止冒泡，但是会跳转，这就是浏览器的默认行为。需要借助preventDefault()方法来阻止。具体可以查看ialertthree()。

目前主流的都是借助jquery来绑定click事件的，这样的话，就简单多了。

我们可以在点击事件时传入参数event，然后直接

event.stopPropagation(); 
    event.preventDefault(); //没有链接不需要加这个。

这样就可以了。

框架就是好，其实还有更简单的，在事件处理程序中返回false，这是对在事件对象上同时调用stopPropagation()和preventDefault()的一种简写方式。 
【详细代码见上面，记得载入jquery.js。】

其实也还可以在每个click事件中加入判断：

$('#id').click(function(event){ 
    if(event.target==this){ 
    //do something 
    } 
    })

解析：事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）。而且，我们知道this引用的是处理事件的DOM元素，所以可以编写以上代码。

不过推荐使用return false，Jquery绑定事件的话。

Js冒泡事件详解及阻止的更多相关文章

  1. javascript冒泡事件详解

    冒泡事件: 定义:当多个Dom元素互相嵌套的时候,一个元素触发了某个事件(例如Click事件),那么嵌套此事件的所有元素都会被触发一次Click事件,注意:只会触发他的直系亲属元素,而与其自己,父级, ...

  2. javascript - 事件详解（阻止事件冒泡+阻止事件行为）

    一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...

  3. react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)

    第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...

  4. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  5. 第三天：JS事件详解-事件流

    学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容:  1)基础概念 2)举例说明: 代码如上,如果用事件 ...

  6. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  7. js keyup、keypress和keydown事件 详解

    js keyup.keypress和keydown事件  详解 js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏 ...

  8. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

  9. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

随机推荐

  1. 安装Ubuntu 16.04双系统详解（Nvidia显卡）

    Ubuntu16.04双系统安装 一.准备工作 设备:惠普台式机,i5-7400.8G内存.1T机械硬盘.NVIDIA GTX1050显卡.预装系统:Win10. 1.下载ubuntu镜像文件,本人使 ...

  2. js正则表达式匹配斜杠 网址 url等

    项目中有个需求,需要从url中截取ID.需要在前台用js匹配截取,所以就百度一下,发现都没有说清楚,所以这里就总结下. 正则表达式如下: var epId=0; //工厂企业ID var urlInd ...

  3. 未能加载文件或程序集“log4net, Version=1.2.10.0, Culture=neutral, PublicKeyToken=1b44e1d426115821”或它的某一个依赖项。系统找不到指定的文件。

    在网上找了很久,很多个地方让修改配置文件,也有重装log4net的. 如文章:使用Common.Logging与log4net的组件版本兼容问题 我检查下发现项目中的package包中的Log4net ...

  4. vim 末行模式简单练习

    练习 1 . 复制/etc/grub2.cfg文件至/tmp目录中,用查找替换命令删除/tmp/grub2.cfg文件中以空白字符开头的行的行首的空白字符 :%s#^[[:space:]]\+##g ...

  5. 服务器BMC（带外）

    服务器除了装linux,windows系统外,相应还有一个可通过网线(服务器默认带外地址--可改)连接具体厂商服务器的BMC(Baseboard Management Controller,基板管理控 ...

  6. Android手机Fiddler真机抓包

    Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许用户监视,设置断点,甚至修改输入输出数据,Fiddler包含了一个强大的基于事件脚本的子系统 ...

  7. wp开发（一）--应用发布篇

    本文非常简单,适合刚刚刚刚入门的菜鸟,且针对的是wp8版本.wp8应用的发布总体来说没什么难度,只是有几个值得注意的地方,希望本文可以减少菜鸟们不必要的担心. 首先假设项目已经完成,且要发布到应用商城 ...

  8. java 调试

    作为一名java开发程序员,或者有时候需要利用工具调试的时候,但是却感觉不会使用,其实只要记住四个键即可. 一般java开发工具使用的都是Eclipse或者MyEclipse,下面都有这几个键F5(进 ...

  9. P3469 [POI2008]BLO-Blockade

    题意翻译 在Byteotia有n个城镇. 一些城镇之间由无向边连接. 在城镇外没有十字路口,尽管可能有桥,隧道或者高架公路(反正不考虑这些).每两个城镇之间至多只有一条直接连接的道路.人们可以从任意一 ...

  10. Argus UVALive - 3135（优先队列 水题一道）

    有一系列的事件,它每Period秒钟就会产生编号为qNum的事件,你的任务是模拟出前k个事件,如果多个事件同时发生,先处理qNum小的事件 今天再看看数据结构.. #include <iostr ...