JS中stopPropagation函数停止事件传播

最新推荐文章于 2024-01-31 19:57:12 发布

智美码农

最新推荐文章于 2024-01-31 19:57:12 发布

阅读量714

点赞数

分类专栏： Javascript 文章标签： javascript

Javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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.οnclick=function(event){
    alert('button click');
};
 
document.body.οnclick=function(event){
    alert('body click');
}

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

加了stopPropagation()

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

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