视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery中阻止冒泡事件的方法介绍_jquery
2020-11-27 21:21:52 责编:小采
文档


一、冒泡事件简介

当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行。
比如:div下的a都有click事件,点击a的时候,会alert出现2次。这个现象叫做冒泡事件。


这个事件从原始元素开始一直冒泡到DOM树的最上层。
目标元素: 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,
并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事 件处理器添加到一个元素上,
等待一个事件从它的子级元素里冒泡上来,并且可以很方便地得知这个事件是从哪个元素开始。
注意:
blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得(在IE之外的其它浏览器中)。

二、阻止jQuery事件冒泡

jQuery对DOM的事件触发具有冒泡特性。有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡。这个时候就要阻止 jQuery.Event冒泡。

在jQuery.Event的文档中的开头得知,jQuery.Event对象是符合W3C标准的一个事件对象,同时jQuery.Event免去了检查兼容IE的步骤。
jQuery.Event提供了一个非常简单的方法来阻止事件冒泡:event.stopPropagation();
代码如下:
$("p").click(function(event){
event.stopPropagation();
// do something
})

但是这个方法对使用live绑定的事件没有作用,需要一个更简单的方法阻止事件冒泡:return false;
代码如下:
$(this).after("Another paragraph!");

return false; });

兼容多个浏览器的终止冒泡函数:
代码如下:
function stopDefault(e) {
//阻止默认浏览器动作(W3C)
if (e && e.preventDefault)
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = false;
return false;
}

三、使用event.tatget属性 明确事件对象

事件处理程序中的变量event保存着事件对象。而event.tatget属性保存着发生事件的目标元素。这个属性是DOM API中规定的,但是没有被所有浏览器实现。jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接收到事件的元素。而且,我们知道this引用的是处理事件的DOM元素。

使用event.tatget属性 明确事件对象

阻止事件冒泡的代码如下:
代码如下:
$(document).ready(function() {
$('switcher').click(function(event){
if(event.target == this)
{
$('switcher .button').toggleClass('hidden');
}
};)
});

下载本文
显示全文
专题