div.onblur的两个解决方法、跳出详细框的控制

 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，但是实现的效果是同样的

 

 

关于DIV的ONBLUR，IE（要设置div的大小） 支持，FF（要设置div的大小和设置tabindex属性）   
2.tabindex="0"    onbulr的做法

<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>

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

 

解决方法就是  在firefox 的情况下 加属性tabindex="0" ,在ie的情况下不需要加这个

 

 

 

 

 

本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/saiusky/archive/2009/08/06/4419429.aspx

tabIndex:

　　当使用键盘时，tabindex是个关键因素，它用来定位html元素。

       tabindex有三个值：0 ，-1， 以及X（X里32767是界点，稍后说明）

       原本在Html中，只有链接a和表单元素可以被键盘访问（即使是a也必须加上href属性才可以)，但是aria允许tabindex指定给任何html元素。

       当tabindex=0时，该元素可以用tab键获取焦点，且访问的顺序是按照元素在文档中的顺序来focus，即使采用了浮动改变了页面中显示的顺序，依然是按照html文档中的顺序来定位。

       当tabindex=-1时，该元素用tab键获取不到焦点，但是可以通过js获取，这样就便于我们通过js设置上下左右键的响应事件来focus，在widget内部可以用到。

       当tabindex>=1时，该元素可以用tab键获取焦点，而且优先级大于tabindex=0；不过在tabindex>=1时，数字越小，越先定位到。

              在IE中，tabindex范围在1到32767之间（包括32767）

              在FF， Chrome无限制，不过一旦超出32768，顺序跟tabindex=0时一样。           

       这个估计跟各个浏览器对int型的解析有关。