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 相关文章推荐
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
validform表单验证的实现方法
Mar 08 Javascript
js实现列表按字母排序
Aug 11 Javascript
node.js基础知识汇总
Aug 25 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
html5中sharedWorker实现多页面通信的示例代码
May 07 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
php中cookie的作用域
2008/03/27 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
javascript基础知识
2016/06/07 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
Python 如何查找特定类型文件
2020/08/17 Python
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
研究生自荐信
2013/10/09 职场文书
假面舞会策划方案
2014/05/29 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技