jquery冒泡,JavaScript冒泡
jquery阻止事件冒泡的方法
第一种event.stopPropagation(); 阻止事件冒泡
创新互联服务项目包括汉寿网站建设、汉寿网站制作、汉寿网页制作以及汉寿网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,汉寿网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到汉寿省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
第二种event.preventDefault() 阻止默认事件的冒泡
jquery如何阻止事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。所以有些时候需要阻止冒泡。
工具原料:编辑器、浏览器
方式一:event.stopPropagation();
$("#div1").mousedown(function(event){
event.stopPropagation();
});
方式二:return false;
$("#div1").mousedown(function(event){
return false;
});
但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。
事件冒泡是什么如何用jquery阻止事件冒泡
(1)什么是事件起泡
首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生。
当事件发生后,这个事件就要开始传播。为什么要传播呢?因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处理这个事件(废话),事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件)。
当事件在传播过程中,找到了一个能够处理它的函数,这时候我们就说这个函数捕捉到了这个事件。
说到这里,关键的问题来了,那就是一个函数是如何捕捉一个事件的呢?这就涉及到事件的冒泡了。
为了更好地理解冒泡的概念,我建议你现在想象一下你的面前放着一杯水,但这杯水和我们平时看到的有点点不同,它分为数层,每一层又分成一或多个区域,最顶层是我们熟悉的窗口对象(即window对象),下一层分为好几个区域(document对象、history对象等等),而document对象的下一层又分为多个子对象。
这些对象的层次关系构成了DOM中的对象树。
事件的传播是有方向的,当点击一个按钮时所产生的事件从这个按钮处开始向上传播(就像一个水泡从杯底冒上来,这就是之所以叫事件冒泡的原因),但这个事件总是寻找特定的属性是否有值。例如按钮的click事件先寻找在按钮上是否有onclick属性的有意义的定义(即该属性指向一个存在的函数或一段可执行的语句),如果有,执行这个函数或语句;然后事件继续向上传播,到达按钮的上一层对象(例如一个form对象或document对象,总之是包含了按钮的父对象),如果该对象也定义了onclick属性,则执行属性的值。
所以,如果这个按钮上面有3层(form、document、window),且这三层都定义了onclick属性,则当按钮的click事件产生时,将会调用4个(包括按钮本身的一个)函数或执行4段语句。
事件的这几个特性在0级dom中也是适用的。
(2)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();
}
);
(3)关于js事件起泡的验证
今天这个问题主要涉及到几个关键词:对象,触发事件,捕获事件,执行处理、起泡。这其实就是整个js执行的过程。其中冒泡这个过程很有意思。其实就像是一杯水,但是这杯水是分层次的,最底下是当前触发事件的对象。然后越往上范围越大,最顶层肯定是window,倒数第二层是document。气泡在上浮过程中会判断当前所到达的层有没有绑定事件处理方法。有话就执行相应的处理。没有的话就继续起泡。直到到达最顶层的window窗口层。我们可以在任何一层做相应的处理以阻止事件继续起泡。方法就是调用事件对象的阻止起泡的方法。event.stopPropagation();下面是写的一个验证js事件起泡的过程方法。
复制代码 代码如下:
script type="text/javascript"
$(document).ready(function(){
$('.one').click(function(e){
alert('one');
});
$('.two').click(function(e){
alert('two');
});
$('.three').click(function(e){
alert('three');
//阻止起泡取消下面的注释
// e.stopPropagation();
});
});
/script
div class="one" style="width:200px;height:200px;background:green;"
one
div class="two" style="width:150px;height:150px;background:yellow;"
two
div class="three"
three
/div
/div
/div
(4)总结
1.一个事件起泡对应触发的是上层的同一事件
特殊:如果two设置成双击事件,那么在你单击two的时候就会起泡触发one单击的事件
(双击包含单击)。
2.如果在click事件中,在你要处理的事件之前加上e.preventDefault();
那么就取消了行为(通俗理解:相当于做了个return操作),不执行之后的语句了。
3.e.stopPropagation()只要在click事件中,就不会触发上层click事件。
关于jquery的冒泡提示问题
$("#Map #a2).气泡.hide();
$("#Map #a).气泡.show();
基本的思路是这样的。你可以设置一个全局的变量存储现在冒泡的ID,这样会更方便一些。
jquery 事件冒泡怎么解决
你现在这么写是有问题的
每次点击a都会给b绑定一个事件
当你点第二次a时 b就有了2个alert事件 所以会执行2次
如果你想建立依赖关系 可以换种思路
不妨通过一个flag 来保存a的点击状态
当a点击过 则b的点击要执行的代码生效
var aClicked = false ;
$(".a").click(function(){
alert("a");
aClicked = true;
});
$(".b").click(function(){
// 这样来建立依赖关系
if(aClicked){
alert("b");
}
});
jquery $('#btn').click与$("#btn").live("click",function()有什么区别?
1、延时绑定事件功能不同:
jquery $('#btn').click在文档流中,后续通过脚本动态添加的元素(符合 id="#btn"),是没有绑定click事件的。
$("#btn").live("click",function()后续通过脚本动态添加的元素(符合 id="#btn"),也是绑定了click事件的。如何使用 live() 方法向尚未创建的元素添加事件处理器。
live()可以将事件绑定到当前和将来的元素(eg:为id=zy元素绑定点击事件,而当用js动态生成一个节点并插入到dom文档结构中时,如果是用bind()绑定的,怎么新插入的节点将不会有该bind绑定事件。而live()则可以);
2、绑定方式不同:
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到DOM节点上。而click()是直接绑定在元素上。
3、底层API支持不同:
click()方法:在jqeury事件处理API中,bind()是其API基础。click(),mouseover(),mousermove等来处理事件,真正起作用的是bind()。而这些方法都只是辅助作用(别名函数),简化使用。都只有一个参数(触发事件时执行的回调函数)。live()不同,不依赖bind()API。
参考资料来源:jQuery-.click()
参考资料来源:jQuery-.live()
网页标题:jquery冒泡,JavaScript冒泡
路径分享:http://cdiso.cn/article/dsdjjsj.html