最近更新
阅读排行
读过本文章的之后读了
关注本站
JS点击其他区域隐藏
阅读：18875 次 编辑日期：2014-04-21
目录：
概述：
工作中你是否遇到过点击一个按钮显示搜索框，点击搜索框之外的地方搜索框隐藏，点击搜索框之内的地方搜索框不隐藏的需求。
大致想一下应该不难，但是仔细想一想呢，没错其实逻辑不是这么简单的，因为浏览器的冒泡行为。
什么是冒泡之前讲过：《理解冒泡与捕获》。
如何阻止冒泡之前也讲过：《如何阻止冒泡》。
初步分析：
那么咱们把思路过一下,首先，点击按钮显示搜索框:
$("#sbt").click(function(){
$("#search").show();
})
这没什么难的，接下来咱们想想点击其他地方隐藏：
进一步分析：
document.onclick = function(){
$("#search").hide();
}
这也很容易理解，那么如何做到点击搜索框区域不隐藏呢？
难点分析：
//点击#sbt时要阻止冒泡，否则 #search 是不显示的，
//因为冒泡了，会执行到下面的方法。
$("#sbt").click(function(e){
$("#search").show();
var ev = e || window.event;
if(ev.stopPropagation){
ev.stopPropagation();
}
else if(window.event){
window.event.cancelBubble = true;//兼容IE
}
})
document.onclick = function(){
$("#search").hide();
}
$("#search").click(function(e){
var ev = e || window.event;
if(ev.stopPropagation){
ev.stopPropagation();
}
else if(window.event){
window.event.cancelBubble = true;//兼容IE
}
})
