javascript - 隐藏 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我不知道)