div.onblur的两个解决方法

1.document.onclick

 

<div id="div1" οnclick="test()">fff</div>
<div id="div2" style="display:none;width:200px;height:120px;"><input type="button"  value="hide"/></div>
<script type="text/javascript">
function test () {
 document.getElementById("div2").style.display="";
 document.getElementById("div2").focus();
}

function hide (event) {
 event=(event==null)?window.event:event;
 var div2=document.getElementById("div2");
 var div1=document.getElementById("div1");
 var target_test=event.target?event.target:event.srcElement; 
 (target_test!=div2) && (target_test!=div1)?div2.style.display='none':null;
}
document.οnclick=hide;
</script>
虽然没有用onblur，但是实现的效果是同样的

2.tabindex="0"

 

<div id="div3" οnclick="test()">fff33</div>
<div id="div4" tabindex="0" οnblur="hide()" style="display:none;width:200px;height:120px;"><input type="button"  value="hide"/></div>
<script type="text/javascript">
function test () {
 document.getElementById("div4").style.display="";
 document.getElementById("div4").focus();
}

function hide () {
 var div2=document.getElementById("div4");
 div2.style.display='none';
}
</script>

这个实现的比较简单，但是不好的地方是div有一个虚线框，不晓得有没有办法去掉？