div.onblur的两个解决方法

来源：互联网发布：淘宝秒刷销量一天千单编辑：程序博客网时间：2024/04/30 21:07

1.document.onclick

<div id="div1" onclick="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.onclick=hide;
</script>
虽然没有用onblur，但是实现的效果是同样的

2.tabindex="0"

<div id="div3" onclick="test()">fff33</div>
<div id="div4" tabindex="0" onblur="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有一个虚线框，不晓得有没有办法去掉？