Right-click Context Menu In JavaScript

"contextmenu" is an event like click, mouseup, mousemove, mousedown. This "contextmenu" event is typically triggered by clicking the right mouse button.

By default, clicking right mouse button, you will get cut, copy, pase, inspect menus. In my program, i have created a custom context menu.

e.preventDefault() menthod cancels all default events on right click.

_currentMenuVisible = null;
    document.addEventListener('contextmenu', e => {
        e.preventDefault();
        createContextMenu(e.clientX,e.clientY);
    });
    document.addEventListener('click', e => {
        closeCurrentlyOpenedMenu();
    });


    /* close context menu */
    window.onkeyup = function(e) {
        if (e.keyCode === 27) {
            closeCurrentlyOpenedMenu();
        }
    }


    function createContextMenu(x, y) {
        closeCurrentlyOpenedMenu();
        const ctxMenuElem =  document.createElement('div');
        ctxMenuElem.classList.add('contextMenu');
        const ulElem =  document.createElement('ul');
        const menuArr = ['edit', 'copy', 'delete'];
        for (let ele of menuArr) {
            let liElem =  document.createElement('li');
            liElem.innerHTML = '<a href="#">' + ele + '</a>';
            ulElem.appendChild(liElem);
        }
        ctxMenuElem.appendChild(ulElem);
        document.body.appendChild(ctxMenuElem);
        _currentMenuVisible = ctxMenuElem;
        ctxMenuElem.style.display = 'block';
        ctxMenuElem.style.left = x + "px";
        ctxMenuElem.style.top = y + "px";
    }


    function closeContextMenu(menu) {
        menu.style.left='0px';
        menu.style.top='0px';
        document.body.removeChild(menu);
        _currentMenuVisible = null;
    }


    function closeCurrentlyOpenedMenu() {
        if (_currentMenuVisible !== null) {
            closeContextMenu(_currentMenuVisible);      
        }
    }

Press ESC key from keyboard to close the context menu. Value of keyCode 27 is indicating ESC key.

    if (e.keyCode === 27) {
            closeCurrentlyOpenedMenu();
    }

Live URL :