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为真时才调用

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。

Hide Div onclick外面

2 个答案: