如何实现仅在指定按钮或元素上触发显示自定义context menu

核心实现思路 #

不需要单独监听元素hover状态维护显隐标记，直接在全局contextmenu事件触发时判断事件源即可，逻辑更简洁，不会出现hover状态不同步的bug：

• 给所有需要唤起自定义菜单的元素加统一标记类（比如.context-menu-trigger）
• 全局监听右键事件，通过event.target.closest()判断当前右键位置是否在目标触发元素范围内，匹配到才弹出自定义菜单，否则直接拦截默认右键行为、不展示自定义菜单
• 监听全局点击、ESC按键事件，触发时隐藏自定义菜单即可
  这种方案天然支持多触发元素，后续新增触发元素只需要加对应标记类，不需要修改JS逻辑。

关于无ID/Class时通过坐标判断悬停的可行性 #

技术上完全可以实现，原生提供了document.elementsFromPoint(x,y)API，传入鼠标横纵坐标就能返回当前坐标下所有层叠的元素列表，遍历列表即可判断是否命中目标元素。
不推荐常规场景使用：相比事件源匹配的方案，坐标判断性能更差，还要额外处理元素层叠遮挡、视口边界等问题，仅适合拿不到元素引用的极端场景使用。

修正后可直接运行的代码 #

CSS 部分 #

#context-menu {
    position: fixed;
    z-index: 20000;
    width: 180px;
    background: #ffaaaa;
    border-radius: 5px;
    display: none;
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
#context-menu .hotspot__item {
    padding: 6px 12px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
}
#context-menu .hotspot__item:hover {
    background: #f88;
}
#context-menu .hotspot__item a {
    color: inherit;
    text-decoration: none;
    display: block;
}
.context-menu-trigger {
    cursor: context-menu;
}

JS 部分 #

function contextMenuAdd(contextMenu, menuString, count) {
    const menuItem = document.createElement('li');
    menuItem.classList.add("hotspot__item");
    menuItem.innerHTML = `<a href="#">${menuString}</a>`;
    menuItem.dataset.row = count;
    // 菜单项点击逻辑
    menuItem.addEventListener('click', () => {
        const rowIndex = parseInt(menuItem.dataset.row);
        const itemText = menuItem.textContent.trim();
        // 替换为实际业务逻辑
        console.log('选中菜单项：', rowIndex, itemText);
        // 点击后隐藏菜单
        contextMenu.style.display = 'none';
    });
    contextMenu.appendChild(menuItem);
}

function initContextMenu() {
    const contextMenu = document.getElementById('context-menu');

    // 初始化菜单项
    contextMenu.innerHTML = '';
    contextMenuAdd(contextMenu, "菜单第1项", 1);
    contextMenuAdd(contextMenu, "菜单第2项", 2);
    contextMenuAdd(contextMenu, "菜单第3项", 3);
    contextMenuAdd(contextMenu, "菜单第4项", 4);

    // 全局右键事件处理
    document.body.addEventListener("contextmenu", (event) => {
        // 判断当前右键目标是否为允许触发菜单的元素
        const triggerEl = event.target.closest('.context-menu-trigger');
        // 非目标区域：拦截默认右键，隐藏自定义菜单
        if (!triggerEl) {
            event.preventDefault();
            contextMenu.style.display = 'none';
            return;
        }
        // 目标区域：拦截默认右键，定位并展示自定义菜单
        event.preventDefault();
        const { clientX: mouseX, clientY: mouseY } = event;
        // 适配视口边界，避免菜单超出屏幕
        const menuWidth = contextMenu.offsetWidth;
        const menuHeight = contextMenu.offsetHeight;
        const posX = mouseX + menuWidth > window.innerWidth ? window.innerWidth - menuWidth - 4 : mouseX;
        const posY = mouseY + menuHeight > window.innerHeight ? window.innerHeight - menuHeight - 4 : mouseY;
        
        contextMenu.style.top = `${posY}px`;
        contextMenu.style.left = `${posX}px`;
        contextMenu.style.display = 'block';
    });

    // 任意点击非菜单区域隐藏菜单
    document.addEventListener("click", (e) => {
        if (!e.target.closest('#context-menu')) {
            contextMenu.style.display = 'none';
        }
    });

    // 按ESC键隐藏菜单
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            contextMenu.style.display = 'none';
        }
    });
}

document.addEventListener('DOMContentLoaded', initContextMenu);

HTML 部分 #

<body id="allofit">
    <header>
        <h2>Context Menu Example</h2>
    </header>
    <div id='sdi_canvas1' style="width:400px; height:400px; border:1px solid #eee;">
        <!-- 给需要触发菜单的元素加context-menu-trigger类即可，支持任意数量 -->
        <button id="container" class="context-menu-trigger">这是第一个触发按钮</button>
        <button class="context-menu-trigger" style="margin-left:20px">这是第二个无ID触发按钮</button>
    </div>
    <ul id="context-menu"></ul>
</body>

坐标判断元素的参考实现（仅技术验证用） #

document.addEventListener('contextmenu', (e) => {
    const { clientX, clientY } = e;
    // 获取当前鼠标坐标下的所有元素
    const hoverEls = document.elementsFromPoint(clientX, clientY);
    // 自定义判断逻辑，比如匹配所有button标签
    const hitTarget = hoverEls.some(el => el.tagName === 'BUTTON');
    if (hitTarget) {
        // 命中目标，执行弹菜单逻辑
    }
});

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