<body style="text-align:center;">
<input type="text" style="width:200px;height:30px;background:pink;margin-top:100px auto 0;">
<div style="width: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>