Question 232605 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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";
}
    Login or Signup to reply.
  2. 0

    //html file

    <div id="rmenu" class="hide">
<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>
</div>

    //css file

    .hide {
opacity: 0;
}

.show {
  z-index: 1000;
  position: absolute;
  background-color: #5c5e63;
  color: #ECECEC;
  border-radius: 5px;
}

    //js file

    document.addEventListener('contextmenu', contextMenu);
document.addEventListener('click', () => {
        document.getElementById("rmenu").className = "hide";
 })

const contextMenu = (e) => {
        document.getElementById("rmenu").className = "show";
        document.getElementById("rmenu").style.top = mouseY(e) + 'px';
        document.getElementById("rmenu").style.left = mouseX(e) + 'px';
        findSelected(e.target.getAttribute('id'));
        window.event.returnValue = false;
    }


export function mouseX(evt) {
    if (evt.pageX) {
        return evt.pageX;
    } else if (evt.clientX) {
        return evt.clientX + (document.documentElement.scrollLeft ?
            document.documentElement.scrollLeft :
            document.div.scrollLeft);
    } else {
        return null;
    }
}

export function mouseY(evt) {
    if (evt.pageY) {
        return evt.pageY;
    } else if (evt.clientY) {
        return evt.clientY + (document.documentElement.scrollTop ?
            document.documentElement.scrollTop :
            document.body.scrollTop);
    } else {
        return null;
    }
}

    Hope this helps!!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search