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

更新时间：2014年08月27日 10:34:47 投稿：junjie

这篇文章主要介绍了JavaScript中使用stopPropagation函数停止事件传播例子,即阻止事件冒泡的一个方法,需要的朋友可以参考下

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

您可能感兴趣的文章:

兼容浏览器的js事件绑定函数(详解)
下面小编就为大家带来一篇兼容浏览器的js事件绑定函数(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
js使用数组判断提交数据是否存在相同数据
判断提交数据是否存在相同数据，在本文将为大家介绍使用数组做到这一点，感兴趣的朋友可以参考下
2013-11-11
JavaScript实现生成随机密码的示例详解
使用JavaScript我们可以轻松地在客户端生成随机密码,本文我们将实现一个简单的随机密码生成器,能够生成指定长度和包含特定字符集的密码,有需要的可以参考下
2024-01-01
javascript实现点击按钮切换图片
这篇文章主要为大家详细介绍了javascript实现点击按钮切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
Javascript操作select控件代码实例
这篇文章主要介绍了Javascript操作select控件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-02-02
JavaScript计算值然后把值嵌入到html中的实现方法
下面小编就为大家带来一篇JavaScript计算值然后把值嵌入到html中的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
浅谈$_FILES数组为空的原因
下面小编就为大家带来一篇浅谈$_FILES数组为空的原因。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
使用BootStrap实现悬浮窗口的效果
本文给大家分享使用BootStrap实现悬浮窗口的效果，神奇的 bootstrap就自带了这个功能。所以就用bootstrap的popover插件做了，效果还不错，感兴趣的朋友参考下吧
2016-12-12
uniapp实现横向滚动选择日期
这篇文章主要为大家详细介绍了uniapp实现横向滚动选择日期，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
js编码之encodeURIComponent使用介绍(asp,php)
因此对于JS脚本又重新研究了一下。在对新的URL编码的时候发现，网页编码的格式对于JS的影响很大，在这里书写一点
2012-03-03