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


Posted in Javascript onAugust 27, 2014

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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
JavaScript闭包函数访问外部变量的方法
Aug 27 #Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 #Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 #Javascript
JavaScript中输出标签的方法
Aug 27 #Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 #Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 #Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 #Javascript
You might like
php cookie的操作实现代码(登录)
2010/12/29 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
python实现连续图文识别
2018/12/18 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
使用python实现kNN分类算法
2019/10/16 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
乡镇创先争优活动总结
2014/08/28 职场文书
2014年外联部工作总结
2014/11/17 职场文书
太行山上观后感
2015/06/05 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
导游词之无锡唐城
2019/12/12 职场文书
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android