Question

求一段JS脚本：当DIV失去焦点后隐藏自身。而当DIV内部元素被点击的时候先触发点击事件再触发失去焦点事件

问题原因是这样的。我做了一个自定义Dropdwon控件。当点击下拉或input框的时候，在input下边弹出选择列表的层DIV. DIV内部是table 每一行是AJAX取的数据。已经实现点击某行给input赋值然后隐藏DIV.
但问题是。如果我点击没有选择。而又同时点击了另一个我这个控件。那么两个弹出的层都在页面上。
我给DIV写了onblur事件 每次弹出的时候给予他焦点。 失去的时候隐藏自身。但是这样的问题是 我点击选择项目的时候 他也失去了焦点，还没来得及给input赋值就隐藏了。

我希望回答者能给我一个脚本或方法 实现当我弹出一个自定义的下拉框的时候 我不选择，而点击了页面的其他位置 。这个下拉框自动隐藏。就跟正常的<select>控件效果一样。就行了。

Answer 1

呵呵，我也遇到过同样的问题，一开始的想法是在弹出的DIV上用onMouseout事件隐藏自己，如果这个DIV中没有其它内容的话是可以实现的，但如果在弹出的div中嵌套有其它div或其它标签的话，就会有问题。记得我好像使用了一个笨办法，就是先获取这个弹出的DIV的范围，同时获取鼠标的当前位置，当鼠标移出DIV的范围的时候，隐藏DIV。以下是这段代码，也共同期待有更好的办法。 还需要说明的是这段代码在IE上没问题，如果是FireFox的话，获取鼠标当前位置应该用：event.pageX|Y，这个问题在代码中加一个判断应该可以解决。

<script language="javascript" type="text/javascript">
document.onmousemove = mouseouthide;
//鼠标移出DIV范围时隐藏
function mouseouthide() {
var b=20;//加一点余量，否则当点击文本框时div没弹出就被隐藏了
var obj = document.getElementById("poplist"); //poplist是弹出div的ID号
var t = document.body.offsetTop;
var l = document.body.offsetLeft;
var ol = l + obj.offsetLeft-b;
var or = l + obj.offsetLeft + obj.offsetWidth + b;
var ot = t + obj.offsetTop-b;
var ob = t + obj.offsetTop + obj.offsetHeight + b;
var x = event.clientX + document.body.scrollLeft;
var y = event.clientY + document.body.scrollTop;
if (x <= ol || x >= or || y <= ot || y >= ob)
obj.style.display = "none";
}
</script>

追问

已解决：
function bodyClick() {
//不是输入框||下拉按钮||弹出层触发的点击事件就隐藏所有层。
var objID = window.event.srcElement.id;
var isInput = objID.indexOf("txtSearch") = -1;
var issearh = objID.indexOf("search_suggest") =-1;
if(isinput &&issearch)
$(".search_suggest").each(function(i, obj) {
obj.style.display = "none";
});
}
}