JS阻止冒泡方法(转)
2024-09-18 09:04:56
S事件流其中一种是冒泡事件,当一个元素被触发一个事件时,该目标元素的事件会优先被执行,然后向外传播到每个祖先元素,恰如水里的一个泡泡似的,从产生就一直往上浮,到在水平面时,它才消失。在这个过程中,如果你只希望事件发生在目标元素,而不想它传播到祖先元素上去,那么你需要在“泡泡”离开对象之前刺破它。
我在文档中写了一个层,<div id="need_hide">点击以外隐藏该层</div>,并为之设置了简单的样式,现在我希望点击该层以外的地方使之隐藏,那么我给根元素绑定了一个click事件,一点击html就隐藏该DIV,代码如下:
document.documentElement.onclick = function() {
document.getElementById('need_hide').style.display = 'none';
}
但是点击该层后,也使之隐藏了,这不是我希望得到的效果。由于该层属于根元素的子节点,所以它也被绑定了这个click事件,那么需在该元素被click时阻止冒泡事件的发生,加上以下代码:
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
document.getElementById('need_hide').onclick = function(e) {
stopPropagation(e);
}
如果还想增加一个链接:<a href="#" id="btn_show">显示层</a>,用它来控制该层显示出来,那么仍然需要在该链接被点击时阻止冒泡事件的发生,加上以下代码:
document.getElementById('btn_show').onclick = function(e) {
document.getElementById('need_hide').style.display = 'block';
stopPropagation(e);
}
最新文章
- WPF Image控件的Source属性是一个ImageSource对象
- 课程1&mdash;&mdash;数据类型和变量
- 【云计算】docker registry v2简介
- shell学习目录
- 锋利的jquery-事件和动画
- 如何在windows上安装部署设置SVN服务器
- lenky的个人站点 ----LINUX 内核进程
- SQL server 2008无法修改表
- kettle 4.4源代码分析Transformation
- Webpack 4教程 - 第七部分 减少打包体积与Tree Shaking
- wx :swipertab切换
- Cocos Creator两个类相互引用(调用)
- MySQL 导出用户权限
- HDU3622(二分+2-SAT)
- python制作查找单词翻译的脚本
- 项目中调试SQLServer 方便的查看SQL语句的执行时间的方法
- new的三种形态
- Linux基础命令之文件过滤及内容编辑处理(二)
- Java精选笔记_Servlet技术
- shell监控网卡状态,故障时自动重启网卡
热门文章
- 第十一章 springboot + mongodb(简单查询)
- TPC-E在populate测试Database时需要注意的一些事项
- Android中远程Service浅析
- 【Gson】简介 文档 基本使用 示例
- vue当前路由跳转初步研究
- [JSP]JSP中include指令和include动作的差别
- spring data 自定义查询
- [Node.js]29. Level 6: Socket.io: Setting up Socket.io server-side &; Client socket.io setup
- XTU1236 Fraction
- 【Python】理想论坛帖子读取爬虫1.04版