如何关闭jquery上下文菜单

Question

我在jquery中显示了一个contextmenu，但我无法关闭它。

这些是我正在注册的事件：

function openContextMenu(event) {
    event.preventDefault();
    $("#custom-menu")
        .css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    })
        .show(100);
    isContextMenuOpen = true;
}

function closeContextMenu(event) {
    console.log("Click called on document");
    if (isContextMenuOpen) {
        $("custom-menu").hide();
        console.log("Hide the context menu");
    }

    isContextMenuOpen = false;
}

function registerMenu() {

    $(document).on({
        contextmenu: function (event) {
            openContextMenu(event);
        },
        click: function (event) {
            closeContextMenu(event);
        }
    });
}

Answer 1

我相信你有一个错字：

$("custom-menu")中的

closeContextMenu应该有ID标识符：

$("#custom-menu").hide();

此外，除非isContextMenuOpen全局声明，否则它将保持范围为openContextMenu，因此hide方法永远不会执行。无论如何你都不需要它，因为无论元素是否可见，hide都会起作用。

请改为尝试：

function closeContextMenu(event) {
    $("#custom-menu").hide();
    console.log("Hide the context menu");
}

另外，只是为了插入我自己的答案，对于一些非常复杂的上下文菜单处理，请看看：

Use Bootstrap 3 dropdown menu as context menu