javascript菜单，当鼠标在div之外时如何关闭？

Question

这是我的第一个纯 JavaScript 脚本，从它的长度你就可以看出!我不知道如何让 div 中的子链接与一个名为“菜单”的类在我离开该 div 时关闭。 我试图编写一个 If 参数，以在我离开“A”和“DIV”时将其设置为关闭，但这似乎不起作用？ 任何帮助将不胜感激，并对过长的代码表示歉意! 请暂时不要使用 Jquery，谢谢!

<script>
    // Variables
    var getFirstMenu = document.getElementsByTagName('div');
    // Use selectors
    var getMenuClasses = document.getElementsByClassName('menu');
    // Hide drop down menus
    for(var i=0; i < getFirstMenu.length; i++){
      getFirstMenu[i].style.visibility = 'hidden';
    }
    // =============================
    // Show Menu on mouseover
    function showDropdown(e){
     var el = e.target;
    if(el.nodeName == 'A'){
        for(var i = 0; i < getMenuClasses.length; i++) {
          if(el == getMenuClasses[0]){
            getFirstMenu[0].style.visibility = 'visible';
          }else if(el == getMenuClasses[1]) {
             getFirstMenu[1].style.visibility = 'visible';
          }else if(el == getMenuClasses[2]){
            getFirstMenu[2].style.visibility = 'visible';
          }
        }
      }
    }
    var getMainMenu = document.getElementById('menu');
    getMainMenu.addEventListener('mouseover', function(e){
        showDropdown(e);
    },false);

    // =============================
    // Hide Menu on mouseout
    function mouseOutMenu(e){
     var el = e.target;
      if(el.nodeName == 'DIV')
        for(var i = 0; i < getFirstMenu.length; i++){
        getFirstMenu[i].style.visibility = 'hidden';
          }
    }
    getMainMenu.addEventListener('mouseout', function(e){
      mouseOutMenu(e);
    }, false);

Answer 1

向文档对象添加处理程序

document.addEventHandler('mouseover', function(){
   // close it
}, false);

或者当要隐藏子菜单时:将处理程序添加到菜单，然后在鼠标悬停时隐藏菜单