preventDefault()间歇性失效：右键自定义弹窗与默认菜单同时出现问题

你用preventDefault()阻止右键默认菜单的逻辑现在间歇性失效，偶尔会同时弹出默认菜单和自定义弹窗，大概率是以下几个原因导致的，对应修复方案如下：

可能的原因及修复 #

1. 事件处理逻辑顺序有误 #

当前代码先获取widgetId再执行阻止操作，如果mouseEvent.target.parentNode不存在（比如元素被动态移除），会抛出错误导致后续的preventDefault()和stopPropagation()没执行。

修复：把阻止默认行为的代码移到函数最开头，确保无论后续逻辑是否出错，都能先拦截默认菜单：

function getRightClickOrd(mouseEvent) {
    "use strict";
    // 优先阻止默认行为和事件冒泡
    mouseEvent.preventDefault();
    mouseEvent.stopPropagation();

    var widgetId = mouseEvent.target.parentNode.id;
    customPopup(widgetId, "command");
}

2. 事件绑定时机不对 #

如果element是动态生成的DOM元素，初始化时绑定事件可能元素还没渲染到页面，导致事件绑定失败，部分场景下触发默认菜单。

修复：改用事件委托绑定到父容器（比如document或稳定存在的父元素），确保目标元素出现时事件能触发：

// 替换成你的目标元素的父容器选择器
document.addEventListener('contextmenu', function(mouseEvent) {
    const targetElement = mouseEvent.target.closest('#你的ElementId');
    if (targetElement) {
        mouseEvent.preventDefault();
        mouseEvent.stopPropagation();
        const widgetId = mouseEvent.target.parentNode.id;
        customPopup(widgetId, "command");
    }
});

3. 存在其他事件冲突 #

页面中其他地方绑定的contextmenu事件，尤其是设置了useCapture: true（捕获阶段触发）的事件，会优先于你的事件执行，导致默认菜单被触发。

排查与修复：在浏览器控制台执行以下命令，查看所有绑定的contextmenu事件：

getEventListeners(document).contextmenu

找到冲突的事件，要么调整其触发顺序，要么移除不必要的绑定。

4. 特殊场景干扰 #

• 浏览器插件可能会劫持右键事件，临时禁用插件测试是否恢复正常。
• 页面中的iframe、阴影DOM元素，可能会导致事件冒泡异常，需要针对这些特殊结构单独处理事件绑定。

兜底方案 #

如果以上方法都无效，尝试在捕获阶段绑定全局阻止逻辑，确保优先拦截：

document.addEventListener('contextmenu', function(e) {
    if (e.target.closest('#你的ElementId')) {
        e.preventDefault();
        e.stopPropagation();
        const widgetId = e.target.parentNode.id;
        customPopup(widgetId, "command");
    }
}, true); // true表示在捕获阶段触发，优先级更高

内容的提问来源于stack exchange，提问作者P.Ellis