stopPropagation为何能抵消preventDefault的作用？

开发者阿泽

2026-8-8

为什么用stopPropagation能绕过oncontextmenu的preventDefault限制？

我遇到一个右键点击无法打开上下文菜单的网站，推测它是通过在oncontextmenu事件中调用preventDefault()来实现阻止的。我通过以下代码成功绕过该限制：

window.addEventListener('contextmenu', (event) => {
    event.stopPropagation();
}, true)

我知道preventDefault()用于阻止事件的默认行为，stopPropagation()用于阻止事件冒泡到父元素，但不清楚stopPropagation()为何能抵消preventDefault()的作用？

核心原因是事件的捕获与冒泡机制，以及你绑定事件时启用了捕获阶段监听（第三个参数true）：

网站的右键阻止逻辑，基本都是在冒泡阶段绑定的（addEventListener默认第三个参数为false，即冒泡阶段触发），类似这样：
```
document.querySelector('.target').addEventListener('contextmenu', (e) => {
    e.preventDefault(); // 阻止右键菜单弹出
});
```
事件流的完整顺序是：捕获阶段（从window向下传递到目标元素）→ 目标元素自身事件 → 冒泡阶段（从目标元素向上传递回window）。你的代码在捕获阶段先执行，调用event.stopPropagation()会直接阻止事件继续向下传递，同时也会阻断后续的冒泡流程。
这就导致网站绑定的那个包含preventDefault()的事件处理函数根本没机会运行，自然不会触发阻止右键菜单的逻辑，所以你能正常打开上下文菜单。