onblur事件触发的onclick

Question

如上所述，我有一个按钮，单击该按钮时，将打开子菜单。对于子菜单中的每个选项，都有三个元素（实际上我认为更多，但为了简单起见将保留为3）。我将焦点放在子菜单的主div（白色“框架”）上。这个div的onblur - 我然后隐藏子菜单。

这一切都像预期的那样行事 - 但我有一个探测器，当某个特定选项的3个元素之一被点击（即给定焦点）时，主div会关闭，因为它是onblur事件处理程序 - 而PopUp函数链接到子菜单中选项的元素的onClick事件不会被触发/到达。

我需要通过这种方式来处理主div的onblur事件，如果选项没有被点击。

我有JQuery明显使用，所以我非常乐意与它一起解决问题。

Answer 1

我要发布这个答案 - 希望有人能改善它或建议一种替代方案，因为它确实感觉像是一种工作。

但是，我所做的是onblur事件 - 不是立即隐藏div，而是使用超时进行一个小的延迟，所以我不会改变onblur/onclick事件的优先级但实际上给了onclick'一个机会'开火。

Answer 2

你可以尝试以下的想法： （未测试所以它需要一些调整/调试..）

function mouseOverSubMenu(mouseX, mouseY) { 
    var divTop = $('.sub_menu').offset().top; 
    var divLeft = $('.sub_menu').offset().left; 
    var divRight = divLeft + $('.sub_menu').width(); 
    var divBottom = divTop + $('.sub_menu').height(); 


    return (mouseX >= divLeft && 
      mouseX < divRight && 
       mouseY >= divTop && 
       mouseY < divBottom); 
} 


$('.sub_menu, .other_elements').hover(
    function(e) { 
     if (mouseOverStartButton(e.pageX, e.pageY)) { 
      // show menu 
     } 
    }, 
    function(e) { 
     if (!mouseOverStartButton(e.pageX, e.pageY)) { 
      //hide menu 
     } 
    } 
);