html 点击div 内部不隐藏，点击div外部则隐藏
实现效果：点击div 内部不隐藏，点击div外部则隐藏
网上找到的办法基本上是：
实现该div的click事件，并阻止冒泡。
实现document的click事件，隐藏该div。
这方法，有个bug，如果点击的元素的click,也阻止了冒泡，则无法实现效果。
本淫想到另一办法。使用focusin,focusout来实现。（貌似只有IE支持onfocusout，onfocusin)。查阅有关资料：onfocusout,onfocusin可冒泡。onfocus,onblur不支持冒泡。
设置div可获得焦点,添加属性 tabindex = "-1"。
使用jquery，不管浏览器的差异。
var divNode = $(该div)；
//设置设div获得焦点
divNode.focus();
var t = 0;
divNode.bind("focusout", function() {
t = setTimeout(function() {
divNode.hide();
}, 0);
return false;
});
divNode.bind("focusin", function() {
if (t != null) {
clearTimeout(t);
}
return false;
});
这种方法bug是，tab切焦，会触发隐藏，单击滚动条不会隐藏。
浏览表现存在差异。
IE下点击地址栏，搜索栏，会触发隐藏。点该div的内部没有焦点的元素一样会触发focusout。而chrome则不会。（FF没有测试，本淫恶心FF！！！）
测试代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body >
<div> <span id="test1btn"/>显示方法1div</span><span id="test2btn"/>显示方法2div</span></div>
<div id='test1' style="display:none; background:rgb(0,153,255)">
<div style="width:100px; height:200px; background-color:rgb(204,204,204)">我是方法1内部元素</div>
</div>
<div id='test2' tabIndex="-1" style="display:none; background:rgb(153,153,153)">
<div style="width:100px; height:200px; background-color:rgb(0,153,255)">我是方法2内部元素</div>
</div>
<div style="width:100px; height:200px; background-color:rgb(255,204,153)" id="noBubble">我阻止了click冒泡,点我试试看。</div>
<script type="text/javascript">
$(function(){
var divNode2 = $("#test2");
var divNode1 = $("#test1");
var t = null;
$("#test2btn").click(function() {
divNode2.css("display", "block");
//这里用jq的focus不能得到焦点。为什么？我想知道，谁能告诉我。难道不支持div获得焦点？
//divNode2.focus();
//js原生态可以使div获得焦点。
document.getElementById("test2").focus();
});
divNode2.bind("focusout", function() {
t = setTimeout(function() {
divNode2.hide();
}, 0);
return false;
});
divNode2.bind("focusin", function() {
if (t != null) {
clearTimeout(t);
}
return false;
});
$("#test1btn").click(function() {
divNode1.show();
return false;
});
divNode1.click(function() {
return false;
});
$(document).click(function(){
divNode1.hide();
});
$("#noBubble").click(function(){return false;});
});
</script>
</body>
</html>
走过，路过，过来看看，点评点评，学习学习！