<body style="text-align:center;">
<input type="text" style="200px;height:30px;background:pink;margin-top:100px auto 0;">
<div style="300px;height:300px;background:red;margin:0 auto;display:none;"></div>
<script>
var input=document.getElementsByTagName('input')[0];
var div=document.getElementsByTagName('div')[0];
//第一种写法
input.addEventListener('click',function(event){
event=event||window.event;
div.style.display="block";
event.stopPropagation();
})
document.addEventListener('click',function(event){
event=event||window.event;
div.style.display="none";
event.stopPropagation();
})
div.addEventListener('click',function(event){
event=event||window.event;
div.style.display="block";
event.stopPropagation();
})
第二种写法
document.onclick=function(event){
event=event||window.event;
div.style.display="none";
event.stopPropagation();
}
input.onclick=function(event){
event=event||window.event;
div.style.display="block";
event.stopPropagation();
}
div.onclick=function(event){
event=event||window.event;
div.style.display="block";
event.stopPropagation();
}
//阻止冒泡的兼容写法
function stopEvent(event){
var e=arguments.callee.caller.arguments[0] || event;//这里是因为除了IE有event其他浏览器没有所以要做兼容
if(window.event){ //这是IE浏览器
e.cancelBubble=true;//阻止冒泡事件
e.returnValue=false;//阻止默认事件
}else if(e && e.stopPropagation){ //这是其他浏览器
e.stopPropagation();//阻止冒泡事件
e.preventDefault();//阻止默认事件
}
}
</script>
</body>