什么是JS事件冒泡？ 
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

如何来阻止Jquery事件冒泡？ 
通过一个小例子来解释

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default5.aspx.cs"Inherits="Default5"%> 
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlns="http://www.w3.org/1999/xhtml"> 
<headrunat="server"> 
<title>Porschev---Jquery事件冒泡</title> 
<scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"></script> 
</head> 
<body> 
<formid="form1"runat="server"> 
<divid="divOne"onclick="alert('我是最外层');"> 
<divid="divTwo"onclick="alert('我是中间层！')"> 
<aid="hr_three"href="http://www.baidu.com"mce_href="http://www.baidu.com"onclick="alert('我是最里层！')">点击我</a> 
</div> 
</div> 
</form> 
</body> 
</html> 

比如上面这个页面， 
分为三层：divOne是第外层，divTwo中间层，hr_three是最里层; 
他们都有各自的click事件，最里层a标签还有href属性。 
运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层---->然后再链接到百度. 
这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。 
事件冒泡过程（以标签ID表示）：hr_three---->divTwo---->divOne。从最里层冒泡到最外层。

如何来阻止? 
1.event.stopPropagation();

<scripttype="text/javascript"> 
$(function(){ 
$("#hr_three").click(function(event){ 
event.stopPropagation(); 
}); 
}); 
<script> 

再点击“点击我”，会弹出：我是最里层，然后链接到百度

2.returnfalse; 
如果头部加入的是以下代码

<scripttype="text/javascript"> 
$(function(){ 
$("#hr_three").click(function(event){ 
returnfalse; 
}); 
}); 
<script> 

再点击“点击我”，会弹出：我是最里层，但不会执行链接到百度页面

由此可以看出： 
1.event.stopPropagation(); 
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 
2.returnfalse; 
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转） 
还有一种有冒泡有关的： 
3.event.preventDefault(); 
如果把它放在头部A标签的click事件中，点击“点击我”。 
会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度 
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

jq 事件冒泡总结的更多相关文章

  1. jq事件冒泡问题

    在程序中使用事件对象非常简单,只需为函数添加一个参数,jquery代码如下: $("element").bind("click",function(event) ...

  2. jq的事件冒泡

    在页面上可以有多个事件,也可以多个元素响应同一件事, 事件冒泡引发的问题: 有些时候不想动用的事件,却因为事件冒泡而触发 解决问题: 1.事件对象 由于IE-DOM和标准的DOM实现事件对象的方法各不 ...

  3. 事件冒泡的应用——jq on的实现

    曾对jQuery中on的实现有所疑问,一直没有找到合适的实现方法,今日看<javascript高级程序设计>中的事件冒泡有了些思路. 针对于新增的DOM元素,JQ中若为其绑定事件就必须使用 ...

  4. jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载

    jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...

  5. js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  6. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  7. jq事件

    1,ready:当DOM载入就绪可以查询及操纵时绑定一个要执行的函数,在使用之前必须确保body元素的onload事件,,没有注册函数,否则不会触发ready函数. $(document).ready ...

  8. jq 事件取消绑定与重新绑定

    前端有时会碰到这样的需求: 点击某个元素发送ajax请求, 发送期间此元素的鼠标相关事件(比如点击)无效, 发送完成鼠标点击事件功能恢复, 对于这种需求, 我们会遇到两种情况, 一种是点击的按钮为fo ...

  9. JS中的事件冒泡——总结

    一. 有话要说 事件冒泡这个话题已经被园子里的朋友说透了,已经没什么要讲的了,但是由于呢我这边有个小问题刚好跟这个事件冒泡有关,就突然性想写个总结:一方面是给自己增加印象,另一方面给园子的新手们,提供 ...

随机推荐

  1. Linux&shell之高级Shell脚本编程-创建菜单

    写在前面:案例.常用.归类.解释说明.(By Jim) 创建菜单#!/bin/bash# testing the scriptclearechoecho -e "\t\t\tSys Admi ...

  2. HDU 1045 Fire Net（图匹配）

    题目大意: 这个是以前做过的一道DFS题目,当时是完全暴力写的. 给你一个N代表是N*N的矩阵,矩阵内 ‘X’代表墙, ‘.’代表通道. 问这个矩阵内最多可以放几个碉堡, 碉堡不能在同一行或者同一列, ...

  3. Balanced Binary Tree——LeetCode

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  4. Topcoder 好题推荐

    SRM SRM147 DIV1 1000pt DP SRM148 DIV1 1100pt 递归 SRM149 DIV1 1000pt math SRM150 DIV1 500pt DP SRM469 ...

  5. Java语言与JVM中的Lambda表达式全解

    Lambda表达式是自Java SE 5引入泛型以来最重大的Java语言新特性,本文是2012年度最后一期Java Magazine中的一篇文章,它介绍了Lamdba的设计初衷,应用场景与基本语法. ...

  6. 修改ORACLE的语言参数

    ALTER SYSTEM SET nls_territory = "CHINA" SCOPE=SPFILE; ALTER SYSTEM SET NLS_CURRENCY = '￥' ...

  7. 《使用Win32DiskImager安装Ubuntu16.04》

    之前,一直使用的是“软碟通”来制作Ubuntu启动盘,或使用“EasyBCD”硬盘安装双系统,但前者在Ubuntu14.10及以后版本中便再也行不通了.此问题是由于Ubuntu使用了最新的syslin ...

  8. 有趣的js符号{}、[]、""、～、++等转换

    (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]] http://www.jointforce.co ...

  9. jquery width(), innerWidth(), outerWidth() 区别

    #div1 { width: 100px; height: 100px; border: 5px black solid; padding: 10px; margin: 10px; backgroun ...

  10. Android应用程序安装与Launcher启动机制

      以下资料摘录整理自老罗的Android之旅博客,是对老罗的博客关于Android底层原理的一个抽象的知识概括总结(如有错误欢迎指出)(侵删):http://blog.csdn.net/luoshe ...