从今天开始要深入JS了,之前仅有基础知识,今天在阅读代码的时候有一个阻止冒泡事件的Function(),于是就研究了起来。
找到了一份很好的资料,与大家分享,这篇博文只用了几句话就解释清楚了。
原文:JS阻止冒泡。
简单的实现了一下,整了半天,代码如下:
<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>