将Div隐藏在外部

Hide Div onclick outside

本文关键字：外部 隐藏 Div      更新时间：2023-09-26

在我的网站上，当用户单击表单时弹出一个div。我使用onclick事件处理程序来显示div。当用户点击div以外的任何地方时，我希望div隐藏自己。我不能使用onblur…因为这对潜水者不起作用。有人能建议一个替代方案吗?

谢谢。下面是我的代码: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';
        }
    }
}

刚刚找到一个简单的解决方案，使用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我不知道)

我过去处理这些事情的方法是在div后面创建一个透明层(使用完全透明的BG图像)，它的CSS位于:

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

这个div当然只有在上面的div可见时才"可见"。然后附加一个onclick事件处理程序来再次隐藏。

确保你的"pop-updiv"的z-index值至少为2。

相关文章：