如何用JavaScript覆盖Web右键默认行为？解决菜单共存问题

问题描述 #

在Blazor WebAssembly应用中，需求是右键点击仅显示自定义上下文菜单，覆盖浏览器默认菜单。但编写JavaScript代码后，出现默认菜单与自定义菜单同时显示的情况，即使使用e.preventDefault()也无法解决。自定义菜单的展示由Razor模板中图片的点击事件调用showContextMenu()方法触发，原代码如下：

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

原因分析 #

• 仅给自定义菜单元素添加contextmenu事件阻止默认行为，但默认菜单是在触发右键的目标元素（如图片）上触发的，而非自定义菜单本身，所以阻止无效。
• 代码存在重复的contextmenu事件监听，且DOMContentLoaded外部的代码可能在页面元素未加载完成时执行，导致无法正确获取元素绑定事件。
• 未在右键事件触发的源头（图片元素）先阻止默认行为，就直接调用自定义菜单展示方法，导致默认菜单已被触发。

解决方案 #

1. 在目标元素上阻止默认右键行为：给触发右键的图片元素（或全局）添加contextmenu事件监听，阻止默认菜单弹出。
2. 整理JS代码，确保DOM加载完成后执行：将所有DOM操作和事件监听放在DOMContentLoaded回调内，避免重复监听。
3. 关联右键事件与自定义菜单：在目标元素的右键事件中，先阻止默认，再调用showContextMenu()并传递坐标。

修改后的代码示例 #

document.addEventListener("DOMContentLoaded", function () {
    // 给图片元素绑定右键事件，阻止默认并调用自定义菜单
    document.addEventListener("contextmenu", function (e) {
        // 仅对图片元素生效，可根据需求调整选择器
        if (e.target.tagName === "IMG") {
            e.preventDefault();
            const img = e.target;
            // 传递图片信息和右键点击坐标
            window.showContextMenu(
                img.id,
                img.alt || "未命名",
                img.width,
                img.height,
                e.clientX,
                e.clientY
            );
        }
    });

    window.showContextMenu = (id, name, width, height, locationX, locationY) => {
        const contextMenu = document.getElementById("contextMenu");
        if (!contextMenu) return;

        // 设置自定义菜单位置与显示状态
        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>
        `;

        // 创建并绑定关闭按钮事件
        const closeButton = document.createElement("button");
        closeButton.textContent = "Close";
        closeButton.id = "closeButton";
        closeButton.addEventListener("click", () => {
            contextMenu.style.display = "none";
        });

        contextMenu.appendChild(closeButton);
    };

    // 点击页面其他区域自动关闭自定义菜单
    document.addEventListener("click", function (e) {
        const contextMenu = document.getElementById("contextMenu");
        if (contextMenu && !contextMenu.contains(e.target)) {
            contextMenu.style.display = "none";
        }
    });
});

额外说明 #

• 如果不需要全局拦截右键，可给Razor中的图片元素添加特定类名（如<img class="context-trigger" />），将事件监听的判断条件改为e.target.classList.contains("context-trigger")。
• 增加的页面点击关闭逻辑，可提升自定义菜单的交互体验。

内容的提问来源于stack exchange，提问作者Manoj Agrawal