在前端工程师在做网页效果时经常会用到点击事件，比如点击一个按钮弹出一个窗口，我用完了想关掉，为了体验度更好我们会做点击除弹窗以外的任意地方关闭这个窗口。
<body>
<div class="container" id="container">
<div class="box" id="box">
这是一个大盒子
</div>
</div>
<script>
document.onclick=function(event){
box.style.display="none";
}
</script>
</body>这样写好像跟我们的目标不太符合，点击窗口也被关闭了，所以我用到了事件对象
document.onclick=function(event){
var event=event||window.event;//event 表示当前的事件 在低版本上有兼容问题所以需要这样写
var targetID=event.target?event.target.id:event.srcElement.id;//event.target 获取当前事件的对象 好东西都不兼容，所以需要这样写才兼容
if(targetID!="box"){
box.style.display="none";
}
}这样差不多好像可以了，但是我们工作中一个窗口里不可能是空的，如果里面有内容，点击到内容窗口还是会被隐藏所以又有下面的解决办法
<div class="container" id="container">
<div class="box" id="box">
这是一个大盒子
<div class="box2"></div>
</div>
</div>
<script>
var box=document.getElementById("box");
box.onclick=function(event){
var event=event||window.event;
if(event&&event.stopPropagation){
event.stopPropagation(); //标准浏览器
}
else{
event.cancelBubble=true; //ie678
}
}
document.onclick=function(event){
box.style.display="none";
}
</script>这样的方法我们满足了我们的需求，这里我们用到了新的知识，阻止冒泡
什么是冒泡？
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
所以我们的思路是给document和窗口都绑定一个点击事件，点击窗口时不做操作阻止冒泡防止触发父元素的事件
if(event&&event.stopPropagation){
event.stopPropagation(); //标准浏览器
}
else{
event.cancelBubble=true; //ie678
}阻止冒泡的方法需要这样写才能兼容低版本浏览器。
湘公网安备43010302000142号
