Onblur事件在另一个div的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
        }
    }
);