3

在此处输入图像描述

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

这一切都按预期运行 - 但我有一个问题，当单击特定选项的 3 个元素之一（即给定焦点）时，主 div 将关闭，因为它是 onblur 事件处理程序 - 以及链接到的 PopUp 函数未触发/到达子菜单中选项的元素的 onClick 事件。

如果未单击选项，我需要以某种方式仅以这种方式处理主 div 的 onblur 事件。

我显然可以使用 JQuery，所以我非常乐意使用它来解决问题。

4

2 回答 2

3

我将发布此答案-希望有人可以改进它或提出替代方案，因为它确实感觉像是一种解决方法。

但是，我所做的是 onblur 事件 - 我没有立即隐藏 div，而是使用超时设置了一个小延迟，因此我不会更改触发的 onblur/onclick 事件的优先级，但实际上给出onclick 'a chance' 触发。

于 2012-05-25T14:10:05.413 回答
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
        }
    }
);
于 2012-05-25T14:05:37.020 回答