Hide div onclick outside

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

我处理这种事情在过去的方式是建立在div后面的透明层（使用背景图片是完全透明的）其中有CSS沿线的地方：

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

这div当然只有“可见”，当顶部的div是可见的。 ，然后附加一个onclick事件处理程序以再次隐藏。

确保您的“弹出格”具有至少2的z-index

Answer 2

刚刚发现使用的onmouseover /事件处理函数中一个简单的解决方案。

只有当变量​​为真时，才会调用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我不知道）