js原生子级元素阻止父级元素冒泡事件
2024-09-30 03:58:12
<html>
<head>
<style type="text/css">
#hide{
width:75%;height:80px;background:skyblue;display:block;
}
.hander{cursor:pointer;}
input{
margin:5 0 0 900;
}
</style>
<script>
//不用window.onload也可以
document.documentElement.onclick = function(){
document.getElementById('hide').style.display = 'none';
}
//阻止冒泡事件方法
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
//方法必须要放在window.onload下
window.onload = function(){
document.getElementById("hide").onclick = function(e){
stopPropagation(e);
}
document.getElementById('btn_show').onclick = function(e) {
document.getElementById('hide').style.display = 'block';
stopPropagation(e);
}
} </script>
</head>
<body>
<div id="hide" class="hander">click here nothing happen,you can click beside this area</div>
<input type="button" id="btn_show" value="show" class="hander"/>
</body>
</html>
最新文章
- oracle 误删数据恢复
- CSS清除浮动八种方法
- SSRS动态设置文本框属性
- MSYS2 安装和配置
- 【HDOJ】4418 Time travel
- Delphi从内存流中判断图片格式(好多相关文章)
- Swift分割字符串
- spring boot跨域问题
- Linux的快捷键一
- [解决]IP地址非法,请接入联通热点后重新获取
- C++随记
- [Visual Studio] [Config] [Transformation] [SlowCheetah] 在非Web工程中使用Transformation
- VSTS 免费代码git/tfs托管体验-使用代码云托管
- 对比几种在ROS中常用的几种SLAM算法
- kafka window环境搭建
- 将图片文件转化为字节数组字符串,并对其进行Base64编码处理,以及对字节数组字符串进行Base64解码并生成图片
- x86,x64,Any CPU区别
- CSS 常用语法与盒模型分析
- 如何将JQUERY对象转成Javascript对象
- 用docker搭建php+nginx+laravel的开发环境