如何为指定HTML元素添加自定义右键菜单项并绑定JS函数？

阿华AIGC实验室

2026-5-11

自定义右键菜单项实现方案

嗨，我来帮你搞定这个问题！首先得明确一点：浏览器并没有提供直接修改原生右键菜单的API，你代码里写的e.menuItems其实是不存在的——原生右键菜单属于浏览器层面的功能，没法直接往里添加自定义项。所以咱们得自己实现一个自定义右键菜单，具体步骤和代码如下：

实现思路

先把你原本的menuItem整合到隐藏的菜单容器里，不让它在页面内联显示。
监听目标元素的contextmenu事件，阻止浏览器弹出原生右键菜单。
在右键点击的坐标位置，显示我们自己的自定义菜单。
添加菜单项的点击触发逻辑，以及点击页面其他区域自动隐藏菜单的处理。

完整代码示例

<!DOCTYPE html>
<html>
<head>
    <style>
        #example {
            border: thin solid;
            padding: 1em;
        }
        /* 自定义右键菜单基础样式 */
        #customContextMenu {
            position: fixed;
            display: none;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            padding: 8px 0;
            min-width: 140px;
            z-index: 9999;
        }
        /* 菜单项样式 */
        #customContextMenu .menu-item {
            padding: 6px 16px;
            cursor: pointer;
            font-size: 14px;
        }
        #customContextMenu .menu-item:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <p id="example">我想在这段文字的右键菜单中添加一个菜单项。</p>

    <!-- 自定义右键菜单容器（默认隐藏） -->
    <div id="customContextMenu">
        <div class="menu-item" id="menuItem">Click me!</div>
    </div>

    <script>
        const targetElement = document.getElementById('example');
        const customMenu = document.getElementById('customContextMenu');
        const menuItem = document.getElementById('menuItem');

        // 监听目标元素的右键点击事件
        targetElement.addEventListener('contextmenu', (e) => {
            // 阻止原生右键菜单弹出
            e.preventDefault();
            
            // 让菜单跟随鼠标点击位置显示
            customMenu.style.left = `${e.pageX}px`;
            customMenu.style.top = `${e.pageY}px`;
            customMenu.style.display = 'block';
        });

        // 自定义菜单项点击逻辑
        menuItem.addEventListener('click', () => {
            alert('the menu item has been clicked');
            // 点击后自动隐藏菜单
            customMenu.style.display = 'none';
        });

        // 点击页面其他区域时隐藏菜单
        document.addEventListener('click', () => {
            customMenu.style.display = 'none';
        });
    </script>
</body>
</html>