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. 期中HTML代码及技术博客

      <!DOCTYPE html>   <html lang="en">   <head>   <meta charset="U ...

  2. 周总结<5>

    周次 学习时间 新编写代码行数 博客量(篇) 学到知识点 12 10 100 1 路由器的设置(ospf协议):网页设计:哈夫曼树(C语言数构) Html案例: <!DOCTYPE html P ...

  3. C++ Primer Plus学习：第三章

    C++入门第三章:处理数据 面向对象编程(OOP)的本质是设计并扩展自己的数据类型. 内置的C++数据类型分为基本类型和复合类型. 基本类型分为整数和浮点数. 复合类型分为数组.字符串.指针和结构. ...

  4. BOM对象属性定时器的调用

    使count中的内容,自动切换 <body> <h1 id="count"></h1> </body> //获取count var ...

  5. Android中res/layout文件夹里新建布局文件，R中不生成ID的奇葩错误

    新浪微博:http://weibo.com/u/1928100503 网上看了下,发现大都是xml文件名大写而导致的id不能生成的问题,但在下的问题却不是大小写的问题,在下发现,当你的layout目录 ...

  6. saltstack基础篇

    使用saltstack的前提是PPT      服务.流程.工具和技术 安装 rpm -Uvh http://mirrors.yun-idc.com/epel/6Server/x86_64/epel- ...

  7. 【.Net】输出的字符靠右对齐

    先看下面的这组字符,如果输出来,它是无法靠右对齐: " }; foreach (string s in s1) { string s2 = s; Console.WriteLine(s2); ...

  8. java 重写父类构造器

  9. BZOJ 2157 旅行(树链剖分码农题)

    写了5KB,1发AC... 题意:给出一颗树,支持5种操作. 1.修改某条边的权值.2.将u到v的经过的边的权值取负.3.求u到v的经过的边的权值总和.4.求u到v的经过的边的权值最大值.5.求u到v ...

  10. BZOJ 1567 Blue Mary的战役地图(二维hash+二分)

    题意: 求两个矩形最大公共子正方形.(n<=50) 范围这么小可以枚举子正方形的边长.那么可以对这个矩形进行二维hash,就可以在O(1)的时候求出任意子矩形的hash值.然后判断这些正方形的h ...