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

2019-11-20 14:14:10

字体：大中小

来源：转载

供稿：网友

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事件冒泡的资料看看。

上一篇：IE浏览器不支持getElementsByClassName的解决方法

下一篇：JavaScript闭包函数访问外部变量的方法