右键单击时jQuery悬停菜单消失右键、单击、菜单、jQuery

2023-09-07 23:17:29 作者:聪明的笨蛋

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

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();});
jquery html5 右键菜单,jQuery 右键菜单插件contextMenu使用详解9 使用menu标签构建菜单 ...

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="">链接</a></li><li><a href="">链接</a></li><li><a href="">链接</a></li></ul></div></div>

解决方案

你可以破解" 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;});如果(!contextMenuOpened){$('#main_menu_inner').hide();}});

现场示例

I have a Menu that opens when hovering. But on right click the menu disappears when the contextmenu opens. But I can't figure out why. I need the hover menu open at the same time with contextmenu/right click.

The jQuery Code (Version 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();

    });

The 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>

解决方案

You can "hack" the mouseover/mouseleave behaviour by adding a boolean to check if the context menu is opened into the mouseleave event handler. That's not a really good practice, but it makes your request possible:

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