事件冒泡 & 阻止事件冒泡
2024-09-30 08:55:29
事件冒泡 : 当一个元素接收到事件的时候,会把他接收到的所有传播给他的父级,一直到顶层window.事件冒泡机制
阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;
事件函数绑定:
//oDiv1.onclick = fn1; 给oDiv加点击事件,给事件绑定一个函数。
<script>
window.onload = function() { var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1'); oBtn.onclick = function(ev) {
var ev = ev || event; ev.cancelBubble = true; //阻止当前对象的当前事件的冒泡 oDiv.style.display = 'block';
}; document.onclick = function() {
oDiv.style.display = 'none';
} }
</script>
===================================================================== 以下是利用事件冒泡机制的例子:
<body>
<div id="div1">
<div id="div2">分享到</div>
</div>
</body> <style>
#div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
#div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;}
</style> <script>
window.onload = function() { var oDiv = document.getElementById('div1'); //只给父级div1添加事件函数,这样子级触发事件的时候也会执行父级的函数
oDiv.onmouseover = function() {
this.style.left = '0px';
} oDiv.onmouseout = function() {
this.style.left = '-100px';
} }
</script>
最新文章
- 【技巧】只利用 Visual Stdio 自带的工具这么找父类?
- Cloudera CDH 、Impala本地通过Parcel安装配置详解
- SQL Server小技巧【1】
- Hbase之必要时取出请求的行(列族所有数据)
- Qt之可重入与线程安全
- destoon使用中的一些心得
- 在HTML中通过jQuery设置列表项符号
- Android Activity的生命周期详解
- iptables的CLUSTER target以太网交换机和想法
- js 获取url链接的任意参数
- 关于gcc的一点小人性化提示
- 自定义JDBC链接池
- ubuntu18.04LTS修改键盘键位
- git的使用命令
- 洛谷P4424 [HNOI/AHOI2018]寻宝游戏(思维题)
- 4、Docker数据管理
- 面试题21:如何判断二叉树是搜索二叉树BST?
- CSS学习摘要-定位
- 多功能电子通讯录(涉及到了双向链表的使用,Linux文件编程等等)
- 51nod 1821 最优集合(思维+单调队列)