【转】点击按钮显示div，然后点击div外的空白处隐藏div（jquery、javascript）

需求为：点击按钮显示div，然后点击div外的空白处隐藏div。

可以用这种方案，但是会循环好多次。后来用的下面转载的方案一，效果还不错

$(document).bind("click",function(e){

　　$("#clickBtn").click(function(event){
　　　　event.stopPropagation();
　　　　return;
　　});

　　$(".pop").hide();

});

=========================下面内容转============-==

一、jquery 点击空白处隐藏div元素

头部head代码：

<style type="text/css">
.pop {
display:none;
width: 200px;
height: 130px;
background: #080;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#clickBtn").click(function(){
$(".pop").show();
});
$(document).bind("click",function(e){
var target  = $(e.target);
if(target.closest(".pop,#clickBtn").length == 0){/*.closest()沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止，返回包含零个或一个元素的 jQuery 对象。*/
$(".pop").hide();
};
e.stopPropagation();
})
})
</script>

正文body代码：

<input type="button" id="clickBtn" value="显示">
<div>点击空白处隐藏div元素</div>
点击空白的地方指定div 隐藏消失了

二、javascript 点击空白处隐藏div元素
头部head代码：

<style type="text/css">
#div1{background:#666;position:absolute;overflow:auto;display:none;padding:50px;}
</style>

<script type="text/javascript">
function $(id){
return (document.getElementById(id));
}

function show_div(evt) {
var od = $(\'div1\');
var e = window.event || evt;
var o = e.srcElement || e.target;
with (od.style) {
display = \'block\';
left = o.offsetLeft + \'px\';
top = o.offsetTop + o.offsetHeight + 1 + \'px\';
}
}

function hide_div(evt) {
$(\'div1\').style.display = \'none\';
}

function control_bubble(oEvent) {
//取消冒泡
oEvent = oEvent || window.event;
if (document.all) {
oEvent.cancelBubble = true;
} else {
oEvent.stopPropagation();
}
};

function fill_input(oEvent) {
$(\'text1\').value = $(\'div1\').innerHTML;
control_bubble(oEvent);
}

window.onload = function() {
$("text1").onfocus = show_div;

document.onclick = function() {//点击空白文档隐藏
hide_div();
};

$("text1").onclick = control_bubble;
$("div1").onclick = fill_input;
}
</script>

正文body代码：

<input type="text" id="text1" value="点击显示">
<div id="div1" align="center">点击本身不会隐藏，但点击空白处会隐藏</div>



方案二 javascript版没用过，仅作收藏。
转自 ：http://www.webhj.com/hj-439.html