When using a web application, the default behavior is to display a context menu when right-clicking. However, in my case, I want to replace this default context menu with a custom one. Despite writing code to achieve this, both menus are currently being displayed simultaneously. My goal is to show 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();
});
Despite trying to use e.preventDefault(), it does not work as intended. This code snippet is part of a Blazor WebAssembly App where showContextMenu() is triggered from the razor template when an image is clicked.