在另一个之前的div的onclick onblur事件触发(Onblur event fires b

如上所述，我有一个按钮，单击该按钮时，将打开子菜单。 对于在子菜单中的每个选项有三个要素（实际上更多的我认为有，但会保持它作为3为简单起见）。 我给聚焦到子菜单的主DIV（白色“帧”）。 的onblur这个div的 - 我然后隐藏子菜单。

这一切都按照我们的期望 - 但我有probem的是，当点击了一个特定的选项3个要素之一（即给予重点），主要的div会到它的onblur事件处理程序关闭原因 - 这是挂在弹出的功能在子菜单中的选项元素的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
        }
    }
);  

文章来源: Onblur event fires before another div's onclick