Question

我希望只要有人点击窗口上的任何地方就会触发事件处理程序（因此，如果他们点击菜单以外的某个位置，我就可以清除它）。以下内容适用于Safari：

   function checkwho(ev) {
      obj=(window.external) ? event.srcElement : ev.target;
      var type=obj.nodeName;
      if ((type == 'BODY') || (type == 'HTML') || (type == 'DIV')) clearmenus(); 
   }

   self.onclick=checkwho;

但它在Firefox或Internet Explorer 6中不起作用，即不会调用处理程序。如何在Firefox和Internet Explorer中使用？

Answer 1

以下内容适用于IE7 +，Safari，Firefox和Chrome：

<body onclick="clearmenus();">

...或“以编程方式”：

document.getElementsByTagName("body")[0].onclick = function(){ clearmenus(); };

Answer 2

jQuery使这种问题很容易以跨浏览器的方式解决。

将onclick事件处理程序绑定到隐藏菜单的body，将另一个绑定到停止传播事件的菜单元素。

Answer 3

前段时间我写了一个脚本给Determine if any "Outside" Element was Clicked with JavaScript。

Answer 4

隐藏类似菜单的更好选择是使用onblur事件。

<div id="menu-div" onclick="showMenu('menu');" onblur="hideMenu('menu');">
    <ul id="menu">
        <li>Thing1</li>
    </ul>
</div>

使用Javascript：

function showMenu(id)
{
    var me = document.getElementById(id);
    me.style.display = 'block';
}

function hideMenu(id)
{
    var me = document.getElementById(id);
    me.style.display = 'none';
}

Firefox和Internet Explorer中的完整窗口onClick处理程序

4 个答案: