事件冒泡
来源:互联网 发布:iphone手机定位软件 编辑:程序博客网 时间:2024/06/05 09:07
事件冒泡:
所谓的事件冒泡就是事件的传递,当子元素事件被人为触发之后,接下来就是自动触发它父级的事件,就这样一直向上传递,它带来的错误一般是不会被发现的,可能都 觉的是没有获取到HTML元素等问题造成的。
处理方法:
首先是测试是否为事件冒泡导致的问题,我们就在子元素和父元素事件之间添加一个alert(1),将父元素事件和子元素事件隔开,观察是否是子元素事件先执行然后再执行父级事件。
处理方式:oEvent.cancelBubble = true; //oEvent代码下有解释
实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件冒泡处理</title>
</head>
<style type="text/css">
div{width: 100px;height: 100px;display: none;background: red;}
</style>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('btn');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(ev){//由于oBtn父级就是全局事件,那么当执行了显示区块事件的瞬间后就会执行父级的事件即隐藏区块,那么在我们肉眼看来区块就根本没有出现过
var oEvent=ev||event; //事件对象用来获取事件的详细信息
oDiv.style.display='block';
oEvent.cancelBubble = true;//取消事件冒泡
//alert(1); 将父级事件和子元素事件中间断开,观察是否区块是不是先显示再隐藏
}
document.onclick=function(){//document指的是全局事件,在页面上任何处点击就会执行
oDiv.style.display='none';
}
}
</script>
<body>
<input type="button" id="btn" value="点击显示">
<div id="div1"></div>
</body>
</html>
- 事件冒泡
- 事件 冒泡
- 冒泡事件
- 冒泡事件
- 事件冒泡
- 冒泡事件
- 事件冒泡
- 事件冒泡
- 事件冒泡
- 事件冒泡
- 事件冒泡
- 事件冒泡
- 事件冒泡
- 事件冒泡:
- 事件冒泡
- 事件冒泡
- 冒泡事件
- 事件冒泡
- 设计模式学习-组合模式
- 流媒体开源项目
- 微信小程序排名规则大揭秘
- 判断平面上任意两条线段是否相交-Python实现
- 常用js-ajax代码
- 事件冒泡
- 2. MTK6737 7.0 Accdet驱动分析总结
- 编一程序,将两个字符串连接起来,用strcat.
- 脏读、不可重复读、幻读
- SpringSession2+SpringDataRedis2+spring5
- 使用CGAL AABBTree计算点到obj模型的距离
- 不同版本PHP之间cURL的区别(-经验之谈)
- ps命令用法
- 用 Python分析胡歌的《猎场》到底值不值得看?