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 ,3 程序黑框得不出结果,所以不知道具体的结果和运行时间. 4 采用更好的专用电脑进行计算.

  2. Strust2： 工作流程

    以下为Struts2的体系结构图: Struts2框架处理用户请求,大体分为以下几个过程: (1)用户发出一个HttpServletRequest请求 (2)请求经过一系列过滤器,最后达到Filter ...

  3. virsh 命令行管理虚拟机

    重用命令和选项 1:查看运行的虚拟机 virsh list   2:查看所有的虚拟机(关闭和运行的虚拟机) virsh list --all   3:连接虚拟机 virsh console +域名(虚 ...

  4. Java String简单知识点总结

    1.字符串的比较 public void run(){ //str1在池中 String str1 = new String("String"); //str2,str3 存在于堆 ...

  5. C语言为运算及 两个变量的赋值问题

    #include <stdio.h>#define ARRAY_SIZE 10int main() {    int arr[ARRAY_SIZE] = {51,116,53,120,85 ...

  6. 规则引擎之easyRules

    规则引擎听起来是蛮高深的一个词语,但透过现象看本质,Martin Fowler 有如下言: You can build a simple rules engine yourself. All you ...

  7. SQL的拼接语句在DELPHI中怎么写

    SQL 语句的拼接,关键点在于对引号的处理上. 在 delphi 的语法中,使用单引号做字符串的标志符.因此,当遇到 SQL 语句中字符串标识量编写的时候,需要用两个单引号来代替实际的引号. 举例: ...

  8. 第111天：Ajax之jQuery实现方法

    由于jQuery中的Ajax方法是用了内置的deferred模块,是Promise模式的一种实现,而我们这里没有讲过,所以我们就不使用这一模式啦. 我们只定义一个Ajax方法,他可以简单的get,po ...

  9. 第87天：HTML5中新选择器querySelector的使用

    一.HTML5新选择器 1.document.querySelector("selector");selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回n ...

  10. Vue 定时执行函数

    var app = new Vue({ el: '#app', data: { count: , }, filters: { }, mounted: function () { this.$nextT ...