隐藏 Div onclick 外部

Question

在我的网站上，当用户单击表单时会弹出一个 div。我正在使用 onclick 事件处理程序来显示 div。我希望当用户单击 div 以外的任何位置时 div 隐藏自身。我不能使用 onblur...因为它不适用于 div。有人可以建议替代方案吗？

谢谢。

我的代码如下所示： JavaScript：

function hideDiv() {
    if (document.getElementById) { // DOM3 = IE5, NS6 
        document.getElementById('mydiv').style.visibility = 'hidden';
    }
    else {
        if (document.layers) { // Netscape 4 
            document.mydiv.visibility = 'hidden';
        }
        else { // IE 4 
            document.all.mydiv.style.visibility = 'hidden';
        }
    }
}

function showDiv() {
    if (document.getElementById) { // DOM3 = IE5, NS6 
        document.getElementById('mydiv').style.visibility = 'visible';
    }
    else {
        if (document.layers) { // Netscape 4 
            document.mydiv.visibility = 'visible';
        }
        else { // IE 4 
            document.all.mydiv.style.visibility = 'visible';
        }
    }
}

Answer 1

刚刚找到一个使用 onmouseover / out 事件处理程序的简单解决方案。

仅当变量 mouse_out 为 true 时才会调用 hideDiv() 函数。

var mouse_out;
mydiv.onmouseover = function(){ mouse_out = false }; // mouse is over div
mydiv.onmouseout = function(){ mouse_out = true }; // mouse outside
document.onclick = function(){
   if(mouse_out)
      hideDiv(),   // hides mydiv
      document.onclick = null; // disables next clicks on document
};

它适用于我测试过的所有浏览器，包括 IE 5。
（IE4和NS4我不知道）

Answer 2

我过去处理这类事情的方法是在 div 后面创建一个透明层（使用完全透明的 BG 图像），该层在以下位置具有 CSS：

div#overlay{
  position: fixed;
  width: 100%;
  height: 100%;
  background-image:url('transparent.gif');
  z-index: 1;
}

当然，只有当 Div 出现时，此 div 才“可见”顶部可见。
然后附加一个 onclick 事件处理程序以再次隐藏。

确保您的“弹出 div”的 z-index 至少为 2。