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. 【第五周】alpha发布之小组评论

    对于昨天的阿尔法发布,有那么几点需要说一下: 1,对这次阿尔法发布的过程,我们组还是基本顺利的,由于之前吃过亏,这次我提前试用了一下投影仪,做了些调试,之后的发布过程起码设备上是正常的. 2,我们的项 ...

  2. json_decode遇到的编码问题

    初入csdn,就最近遇到的简单问题做一个功能解释; json_encode和json_decode只针对utf8字符有效,如果遇到其他编码比如gbk,需要进行转码然后解析: header(" ...

  3. PHP学习之输出字符串(echo,print,printf,printr和vardump)

    下面一一进行介绍. 1. echo echo 是PHP的一个关键字,它没有返回值.在写法上,它可以省略小括号.如下代码: 复制代码 代码如下: echo 'Test String'; echo('Te ...

  4. nodejs 调试

    什么语言入门的准备功能就是写helloworld, 调试. 用惯了chrome的话,推荐用chrome自带的调试器来调试.很方便. 在地址栏中输入 chrome://inspect 并按回车,会打开如 ...

  5. 主流的RPC框架有哪些

    RPC是远程过程调用的简称,广泛应用在大规模分布式应用中,作用是有助于系统的垂直拆分,使系统更易拓展.Java中的RPC框架比较多,各有特色,广泛使用的有RMI.Hessian.Dubbo等.RPC还 ...

  6. Delphi ADOQuery多个参数重复 改编技巧

    今天看了多年前的一个帖子,发现回答不合理,有些还将其归为delphi的bug.其实主要是没有灵活应用参数. ADOQUERY查询时,这样不行,结果不正确. WITH ADOQUERY1 DO BEGI ...

  7. Spring Autowired原理

    今天来整理一下Spring的自动装配 autowire一节,在这里我们要解决以下问题: 什么是自动装配? 自动装配的意义? 自动装配有几种类型? 如何启用自动装配? 自动装配将引发的问题? 一.什么是 ...

  8. [LeetCode] Search in Rotated Array II

    Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? Would this ...

  9. 第132天：移动web端-rem布局（进阶）

    rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...

  10. Cells UVALive - 3486（dfs序+手动开栈）

    给一棵树,每次每次询问一个点是否是另一个点的祖先? 输入时是每个下标对应节点的儿子的数量 用dfs序 时间戳.. 如果一个点是另一个点的祖先,那么它的两个标记一定在祖先的范围之内 #include & ...