右键点击事件必须用 contextmenu 而非 click 或 mousedown，需同步调用 event.preventDefault() 阻止默认菜单；移动端需模拟长按；确保按钮未禁用且 pointer-events 为 auto。
右键点击事件用 contextmenu，不是 click 或 mousedown
HTML 按钮默认不响应右键的 click 事件（它只触发左键），想捕获右键必须监听 contextmenu。这是最常被忽略的前提——写成 onclick 或监听 onmousedown 并判断 event.button === 2 虽然能“检测”到右键，但无法可靠阻止浏览器默认右键菜单，尤其在 Safari 和部分移动端 WebView 中行为不一致。
正确做法是直接绑定 contextmenu 事件，并在回调中调用 event.preventDefault()：
button.addEventListener('contextmenu', function (e) {
e.preventDefault(); // 关键：阻止默认右键菜单
console.log('右键被点击');
});
preventDefault() 必须在事件处理函数内同步调用
如果把 preventDefault() 放在异步操作里（比如 setTimeout 或 Promise 回调中），就完全无效——浏览器早已弹出菜单了。另外，不能靠返回 false 来替代，现代标准下只有显式调用 preventDefault() 才可靠。
- ✅ 正确：
e.preventDefault()在事件函数第一行或逻辑开始前调用 - ❌ 错误：
setTimeout(() => e.preventDefault(), 0) - ❌ 错误：
return false（仅对旧版 inline handler 有效，且不推荐）
注意移动端和触摸设备的兼容性差异
原生 contextmenu 在 iOS Safari 和部分 Android 浏览器中默认被禁用或延迟触发，尤其当页面没有设置 user-select: none 或存在其他手势干扰时。若需全平台一致支持，得配合 touchstart + touchend 模拟长按（约 500ms），再手动触发右键逻辑：
立即学习“前端免费学习笔记（深入）”；
let startTime;
button.addEventListener('touchstart', e => { startTime = Date.now(); });
button.addEventListener('touchend', e => {
if (Date.now() - startTime > 500) {
e.preventDefault();
handleRightClick(); // 自定义逻辑
}
});但这不是真正意义上的“右键”，只是功能模拟；真实右键菜单仍不可见，也无需 preventDefault()。
按钮需有交互能力，避免被禁用或失去焦点
如果按钮设置了 disabled 属性，contextmenu 事件根本不会触发。同样，CSS 中的 pointer-events: none 或父级覆盖层也会拦截事件。检查元素是否可交互：
- 确保没有
disabled属性 - 检查 computed style 中
pointer-events是否为auto - 用浏览器开发者工具的「Event Listeners」面板确认
contextmenu是否已绑定成功
实际调试时，直接在控制台运行 getEventListeners(button) 是最快验证方式。
右键逻辑本身简单，但跨浏览器、跨设备的一致性往往卡在细节：事件类型选错、preventDefault 调用时机不对、或元素本身不具备事件捕获资格。
