JS中stopPropagation函数停止事件传播

JavaScript 2012-08-14 JS,事件

JS中的事件默认是冒泡方式,逐层往上传播,可以通过stopPropagation()函数停止事件在DOM层次中的传播。如以下例子:

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>stopPropagation()使用 - 琼台博客</title>
</head>
<body>
<button>button</button>
</body>
</html>

 

没有加stopPropagation()

var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
	alert('button click');
};

document.body.onclick=function(event){
	alert('body click');
}

DOM逐层往上传播,所以单击button按钮也传播到了body层,于是body层的click也响应了。结果弹出两个警告框,分别是button与body。

 

加了stopPropagation()

var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
	alert('button click');
	// 停止DOM事件层次传播
	event.stopPropagation();
};

document.body.onclick=function(event){
	alert('body click');
}

在button的单击事件处理函数中使用了stopPropagation()停止事件传播函数,所以在弹出来自button单击事件的警告框以后就传播不到body,也就不会再次弹出body的警告框,结果只谈一次警告框

好多童鞋在写JS的时候,往往忽视了DOM事件逐层往上传播的特性,导致程序出现异常。如果需要了解更深入的知识可以找找有关JS事件冒泡的资料看看。

文字链接:《JS中stopPropagation函数停止事件传播

文章地址:http://www.qttc.net/201208180.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?