JavaScript中使用stopPropagation函数停止事件传播例子

时间:2014-08-27    点击:79   

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

HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>stopPropagation()使用 - 琼台博客</title>
</head>
<body>
<button>button</button>
</body>
</html>
[/code] 
没有加stopPropagation()
[code]
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事件冒泡的资料看看。

JavaScript判断变量是对象还是数组的方法
javascript正则表达式参数/g与/i及/gi的使用指南
JavaScript数组函数unshift、shift、pop、push使用实例
JavaScript AJAX之惰性载入函数
IE浏览器不支持getElementsByClassName的解决方法
> 返回     
地址:上海市普陀区胶州路941号长久商务中心 电话: QQ:
© Copyright 2012 上海网络 Product All Rights Reserved