JavaScript实现事件的中断传播和行为阻止方法示例


Posted in Javascript onJanuary 20, 2017

事件传播

MicroSoft的设计是当事件在元素上触发时,该事件将接着在该节点的父节点触发,以此类推,事件一直沿着DOM树向上传播,直到到达顶层对象document元素。这种自底向上的事件传播方式称为“事件冒泡”,也就是事件传播。

如何中断事件的传播?

stopPropagation() w3c取消冒泡

cancleBubble = true IE取消冒泡

取消事件默认效果:

returnValue = false IE 取消事件效果

defaultPrevent() w3c取消事件效果

<div id='aa'>
 <div id='bb'>
 <div id ='cc'></div>
 </div>
</div>
#aa{
 width: 600px;
 height: 600px;
 background: gray;
}
#bb{
 width: 400px;
 height: 400px;
 background: green;
}
#cc{
 width: 200px;
 height: 200px;
 background: red;
}

捕捉写法停止传播 从最顶层开始往下

document.getElementById('aa').addEventListener('click',function (ev){alert('aa');ev.stopPropagation();},true);// 结果捕捉到aa 加true 由冒泡变为捕捉 从上到下
 document.getElementById('bb').addEventListener('click',function (){alert('bb')},true);
 document.getElementById('cc').addEventListener('click',function (){alert('cc')},true);

冒泡写法停止传播 从下往上

document.getElementById('aa').addEventListener('click',function (){alert('aa');});//加true 由冒泡变为捕捉 从上到下
 document.getElementById('bb').addEventListener('click',function (){alert('bb')});
 document.getElementById('cc').addEventListener('click',
 function (ev){
 alert('cc');
 ev.stopPropagation();
 // ev.cancleBubble = true;//IE下 取消冒泡方法
 }); //结果是冒出cc 停止传播
}

取消事件效果

returnValue = false //IE 取消事件效果

preventDefault() //w3c取消事件效果

document.getElementsByTagName('a')[0].onclick = function (ev){
 alert('点击');
 //达到事件结束的效果 但是函数还是往下运行
 //
 ev.preventDefault();
 alert('已经拦截');
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
js正则表达式的使用详解
Jul 09 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 #Javascript
BootStrap组件之进度条的基本用法
Jan 19 #Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 #Javascript
js实现符合国情的日期插件详解
Jan 19 #Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 #Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 #Javascript
原生js实现电商侧边导航效果
Jan 19 #Javascript
You might like
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
php实现留言板功能
2017/03/05 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
tensorflow更改变量的值实例
2018/07/30 Python
Python pandas用法最全整理
2019/08/04 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
Python列表切片常用操作实例解析
2020/03/10 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
新驾驶员个人自我评价
2014/01/03 职场文书
销售助理岗位职责
2014/02/21 职场文书
公司节能减排方案
2014/05/16 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
党员理论学习心得体会
2016/01/21 职场文书
自考生自我评价
2019/06/21 职场文书
浅析Python实现DFA算法
2021/06/26 Python
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL