<html>
<head>
<style type="text/css">
#hide{
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>