jquery事件冒泡

一、什么是冒泡事件

事件发生后,浏览器通常首先触发事件发生元素上的事件处理程序,然后是它的父元素,父元素的父元素……依此类推, 直到文档的根元素为止。

这被称为事件冒泡,是事件传播的最常见的方式。当处理好一个事件后, 你可能想要停止事件的传播,不希望它继续冒泡。就要绑定该事件的处理方法。

如上图,给他们都设置一个点击事件,当点击button时即触发button的点击事件时则会触发相应的父元素div发生点击事件,再触发body发生触发事件,以此类推直至document或是window为止。

二、冒泡举例说明

程序:

效果:

当点击three所在的红色盒子的时候,出现弹框three,确定之后又出现弹框two再出现弹框one。

当点击two所在的黄色盒子的时候,出现弹框two,再出现弹框one。

当点击one所在的绿色盒子的时候,只出现弹框one。

即前两种情况都发生了冒泡。

如果有人说是书写的click事件的先后顺序导致的,但是并不是,都是当文档加载结束后执行的。

阻止冒泡的方法:

若想在点击two之后阻止后面继续的冒泡,则添加以下即可

则之后出现弹框two不再出现弹框one。

三、jquery阻止事件起泡实例

1、通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

$("form").bind(

  "submit",

  function() {

    return false;

   }

);

2、通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:

$("form").bind(

  "submit",

  function(event){
    event.preventDefault();
  }

);

3、通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:

$("form").bind(

  "submit",

  function(event){
    event.stopPropagation();
  }

);

四、相关网址

http://www.cnblogs.com/secying/archive/2012/03/22/2411493.html

http://blog.163.com/chtx87_98/blog/static/654011192011830928585/

http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.html

时间: 2025-01-05 21:00:51

jquery事件冒泡的相关文章

jquery 事件冒泡的介绍以及如何阻止事件冒泡

原文地址:http://www.jb51.net/article/32792.htm 什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 如何来阻止Jquery事件冒泡? 通过一

阻止jQuery事件冒泡

Query对DOM的事件触发具有冒泡特性.有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡.这个时候就要阻止 jQuery.Event冒泡. 在jQuery.Event 的文档 中的开头得知,jQuery.Event对象是符合W3C标准的一个事件对象,同时jQuery.Event免去了检查兼容IE的步骤. jQuery.Event提供了一个非常简单的方法来阻止事件冒泡:event.stopPropagation(); Js代码   $("p").click(functio

Jquery 事件冒泡

secying Jquery 事件冒泡 原文链接http://blog.163.com/chtx87_98/blog/static/654011192011830928585/ 原文链接二:http://hi.baidu.com/armyknife/blog/item/60ddc6c378b00847b219a81b.html (1)什么是事件起泡首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件

jQuery事件冒泡阻止

1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素. 这个属性是DOM API中规定的,但是没有被所有浏览器实现 . jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性. 通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素). 而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码: $(document).ready(function(){ $('#

Jquery 事件冒泡 以及阻止默认事件

1.e.preventDefault()阻止事件默认行为 e.preventDefault();----根据英文意思,如:<a href="http://i.cnblogs.com/EditPosts.aspx?opt=1" id="xx">xx</a> $("#xx").click(function(e){ alert("xxx");e.preventDefault();});  ----------

JavaScript之jQuery-4 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)

一.jQuery 页面加载后执行 代码执行的时机选择 - $(document).ready()方法和 window.onload事件具有相似的功能,但是在执行时机方面是有区别的 - window.onload 事件是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行 - $(document).ready()方法注册的事件处理程序,在DOM完全加载后就可以调用 - 一般来讲, $(document).ready()的执行要优于window.onload事件 - 需要注意的是,

事件冒泡及事件委托的理解(JQuery Dom操作)

jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会触发事件,只是没有结果,事件冒泡传递还是会发生 系统自动产生的event事件对象 function传的第一个参数就是event事件对象 1 event.stopPropagation(); // 阻止事件冒泡 2 event.preventDefault() // 阻止默认行为 比如submit阻止

jq 事件冒泡总结

什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 如何来阻止Jquery事件冒泡? 通过一个小例子来解释 <%@PageLanguage="C#"AutoEve

探讨JavaScript的事件冒泡

JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层.天台县羿壮冶金 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形式出现.使用事件代理的话我们可以把事件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以很方便地得知这个事