右键单击时jQuery悬停菜单消失答案

【问题标题】：jQuery Hover Menu disappears when right click右键单击时jQuery悬停菜单消失
【发布时间】：2015-04-17 08:23:37
【问题描述】：

我有一个在悬停时打开的菜单。但是右键单击菜单会在上下文菜单打开时消失。但我不知道为什么。我需要通过上下文菜单/右键单击同时打开悬停菜单。

jQuery 代码（版本 jquery-1.11.2.min.js）：

    jQuery(document).on('mouseover','#main_menu',function() {

        jQuery('#main_menu_inner').show();

    });
    jQuery(document).on('mouseleave','#main_menu',function() {

        jQuery('#main_menu_inner').hide();

    });

HTML：

<div id="main_menu">
    <img id="menu_button" src="/skin/images/all/structure/menu_button.png" alt="Men&uuml;" />
    <div id="main_menu_inner">
        <img id="menu_arrow" src="/skin/images/all/structure/main_menu_arrow_down.png" alt="Arrow" />
        <div class="clear_right"></div>
        <ul>
            <li>
                <a href="">Link</a>
            </li>
            <li>
                <a href="">Link</a>
            </li>
            <li>
                <a href="">Link</a>
            </li>
        </ul>
    </div>
</div>

【问题讨论】：

mouseleave => hide
嗯，但是当我删除 mouseleave 代码时，菜单会在鼠标离开时保留。
好吧，你需要弄清楚这里的逻辑。恐怕这是社区无法帮助您的事情。
好的，感谢您的帮助:)
项目是嵌套的，所以events 冒泡。给它一个搜索，你会得到整理。

标签： jquery hover contextmenu show-hide right-click

【解决方案1】：

您可以通过添加一个布尔值来“破解”mouseover/mouseleave 行为，以检查上下文菜单是否已打开到 mouseleave 事件处理程序中。这不是一个很好的做法，但它使您的请求成为可能：

var contextMenuOpened = false;

$(document).on('mouseover', '#main_menu', function () {
    $('#main_menu_inner').show();
    contextMenuOpened = false;
});

$(document).on('mouseleave', '#main_menu', function () {
    $("#main_menu").on('contextmenu', function (e) {
        contextMenuOpened = true;
    });
    if (!contextMenuOpened) {
        $('#main_menu_inner').hide();
    }
});

Live exemple

【讨论】：

为每个mouseleave 注册$("#main_menu").on('contextmenu' 是个坏主意。如果您离开 #main_menu，例如树时间然后有为#main_menu注册的树回调做同样的事情。