How to override the default right click behavior in web using javascript

Question

In a web application, when right-clicking, a context menu is typically displayed. I want to override this default behavior and show my custom menu instead. I've written the following code. However, the issue I'm facing is that both the default context menu and my custom context menu are being displayed. I want to display only my custom context menu and not the default one.

document.addEventListener("DOMContentLoaded", function () {
    window.showContextMenu = (id, name, width, height, locationX, locationY) => {
        var contextMenu = document.getElementById("contextMenu");
        contextMenu.style.position = "absolute";
        contextMenu.style.left = locationX + "px";
        contextMenu.style.top = locationY + "px";
        contextMenu.style.display = "block";

        contextMenu.innerHTML = `
            <ul>
                <li>Id: ${id}</li>
                <li>Name: ${name}</li>
                <li>Width: ${width}</li>
                <li>Height: ${height}</li>
                <li>LocationX: ${locationX}</li>
                <li>LocationY: ${locationY}</li>
            </ul>
        `;

        // Create the close button element
        const closeButton = document.createElement("button");
        closeButton.textContent = "Close";
        closeButton.id = "closeButton";

        // Add a click event listener to the close button
        closeButton.addEventListener("click", function () {
            contextMenu.style.display = "none";
        });

        // Append the close button to the context menu
        contextMenu.appendChild(closeButton);
    };


    const contextMenu = document.getElementById("contextMenu");
    contextMenu.addEventListener("contextmenu", function (e) {
        e.preventDefault();
    });
});



const contextMenu = document.getElementById("contextMenu");
contextMenu.addEventListener("contextmenu", function (e) {
    e.preventDefault();
});

I tried e.preventDefault(), but it's not working as expected. The above code is the part of Blazor WebAssembly App showContextMenu() is called from the razor template on the click event of image.

Answer 1

The issue is that you're only preventing the default behavior on your custom context menu, not on the entire document or target element where the right-click is intended. To prevent the default context menu from showing up, you should attach the contextmenu event listener to the entire document or the specific target element and call e.preventDefault() there. Ensure the listener is added before the right-click occurs on the desired element.

Here's a proposed implementation:

document.addEventListener("DOMContentLoaded", function () {
    document.addEventListener("contextmenu", function (e) {
        e.preventDefault();  // Prevent default context menu from showing up
        showContextMenu();
    });
});

function showContextMenu() {
    var contextMenu = document.getElementById("contextMenu");
    
    // ... 

    contextMenu.style.display = "block";
}