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. C#高级编程 (第六版) 学习 第三章：对象和类型

    第三章 对象和类型 1,类和结构 类存储在托管堆上 结构存储在堆栈上   2,类成员 类中的数据和函数称为类成员 数据成员 数据成员包括了字段.常量和事件   函数成员 方法:与某个类相关的函数,可以 ...

  2. 运维学习笔记（七）之T02-01计算机网络 、 数制 、 网络通信参考模型

    计算机网络 计算机网络概述 什么是计算机网络 硬件方面:通过线缆将网络设备和计算机连接起来 软件方面:操作系统.应用软件.应用程序通过通信线路互连 实现资源共享.信息传递 功能 数据通信/资源共享/增 ...

  3. 转 Maven常用仓库地址以及手动添加jar包到仓库

    转自:http://blog.csdn.net/kqygww/article/details/12837783 共有的仓库 http://repository.sonatype.org/content ...

  4. webgl学习笔记五-纹理

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...

  5. SPOJ3713——Primitive Root

    终于有一个SPOJ题目是我自己独立做出来的,ORZ,太感动了. 题目意思是给你一个素数,问你一个数r是否满足,r,r^2,r^3,……,r^p-1,全不相同. 以前做过这种类型的题目额.是这样的. 根 ...

  6. SPOJ3899——Finding Fractions

    SPOJ上的每个题目都做得我泪牛满面. 这个题目也是的.题目意思是给你两个分数a/b和c/d,要你求出一个分数p/q,使得a/b<p/q<c/d,且p最小. 看完题目后半天都没有任何思路哦 ...

  7. 前端基础：JavaScript DOM对象

    JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...

  8. 【CF666E】Forensic Examination（后缀自动机，线段树合并）

    [CF666E]Forensic Examination(后缀自动机,线段树合并) 题面 洛谷 CF 翻译: 给定一个串\(S\)和若干个串\(T_i\) 每次询问\(S[pl..pr]\)在\(T_ ...

  9. [NOIP2016 D1T3]换教室 【floyd+概率dp】

    题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有 2n2n 节课程安排在 nn 个时间段上.在第 ii(1 \leq i \leq n1≤ ...

  10. dorado7常用内容

    1.dataset添加数据this.get("#dsProduct").getData().insert();或者this.get("#dsProduct"). ...