How to close the jQuery context menu

I'm displaying a contextmenu in jQuery, but am unable to close it.

These are the events that I am registering:

<!-- language: lang-js -->

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);
        }
    });
}

I believe you just have a typo:

$("custom-menu") in closeContextMenu should have a ID identifier:

<!-- language: lang-js -->

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

Also, unless isContextMenuOpen is declared globally, it will remain scoped to openContextMenu, so the hide method will never execute. You don't need it anyway as hide will work whether the element is visible or not.

Try this instead:

<!-- language: lang-js -->

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

Also, just to plug my own answer, for some pretty sophisticated context menu handling, look at this:

Use Bootstrap 3 dropdown menu as context menu