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事件冒泡的资料看看。
您可能感兴趣的文章:
- MySQL数据库事务隔离级别介绍(Transaction Isolation Level)
- spring事物传播propagation类别含义详解
- spring事务Propagation及其实现原理详解
- python实现BackPropagation算法
- js中的preventDefault与stopPropagation详解
- 关于event.cancelBubble和event.stopPropagation()的区别介绍
- Jquery阻止事件冒泡 event.stopPropagation
- 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）
- 浅谈spring中isolation和propagation的用法
相关文章
这篇文章主要为大家详细介绍了javascript实现超级炫酷的3D烟花特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
这篇文章主要介绍了JS 仿腾讯发表微博的效果代码，有需要的朋友参考一下2013-12-12
这篇文章主要给大家介绍了关于Javascript新手入门之字符串拼接与变量应用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了webpack 开发和生产并行设置的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了小程序点餐界面添加购物车左右摆动动画，当用户点击添加到购物车后会有一个左右摆动的购物车提示效果，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-09-09
这篇文章主要介绍了2020淘宝618理想生活列车自动领喵币脚本,需要先安装 auto.js脚本，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
这篇文章主要给大家介绍了关于JavaScript对象详解之js对象属性的添加的相关资料,在JavaScript中对象是通过键值对来存储数据的一种数据类型,可以通过直接给对象添加属性的方式来增加对象的属性,需要的朋友可以参考下2023-07-07
你知道new吗？你知道new的实现原理吗？你能手写new方法吗？不要担心，这篇文件就来带大家深入了解一下JavaScript中的new操作符，感兴趣的小伙伴可以学习一下2022-10-10
这篇文章主要介绍了详解微信小程序「渲染层网络层错误」的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
uniapp使用uni.chooseLocation()打开地图选择位置详解
这篇文章主要给大家介绍了关于uniapp使用uni.chooseLocation()打开地图选择位置的相关资料,因为最近在项目中遇到一个要用户授权位置且可以用户自己选择位置的功能,需要的朋友可以参考下2023-06-06
最新评论