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 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
用js得到网页中所有的div的id
Oct 19 Javascript
js form action动态修改方法
Nov 04 Javascript
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 Javascript
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数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
python转换摩斯密码示例
2014/02/16 Python
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python中装饰器高级用法详解
2017/12/25 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
土建资料员岗位职责
2014/01/04 职场文书
教导处工作制度
2014/01/18 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
干部考核评语
2014/04/29 职场文书
委托书范本
2014/09/13 职场文书
小学德育工作总结2015
2015/05/12 职场文书
闪闪红星观后感
2015/06/08 职场文书
八年级作文之感恩
2019/11/22 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技