防止右键单击元素打开上下文菜单

Question

当用户右键单击元素 <div class="myElement"></div> 时，我希望我的网站具有自定义交互。因此，我不会在右键单击元素时弹出上下文菜单，以免破坏用户体验。有没有办法做到这一点（最好是在 CSS 中，但 vanilla js 也可以）？

期望：

 .myElement {
    contextMenuOnRightClick: none,
}

原文由 agreis1 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最简单的方法是使用一些非常简单的 JavaScript：

 <div class="myElement" oncontextmenu="return false;"></div>

• oncontextmenu ：显示上下文菜单（右键单击菜单）时触发事件。
• return false; : 取消事件；这会阻止菜单显示。

更好的是，不要使用 内联 JS ，而是创建一个可重用的 .js-noMenu 并将其添加到任何应该阻止右键单击的元素中。

将 JS 行放入您的 Javascript 文件中。

 [...document.querySelectorAll(".js-noMenu")].forEach( el =>
 el.addEventListener('contextmenu', e => e.preventDefault())
);

 <div class="js-noMenu">Right click me!</div>
<p>You <b>can</b> contextmenu me!</p>
<p class="js-noMenu">You cannot here</p>

基本上 Event.preventDefault() 阻止浏览器触发默认操作

原文由 Toastrackenigma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是我最喜欢和最简单的方法（我的自定义 JS 的第一行之一）…

 /* disable right click */
document.addEventListener('contextmenu', event => event.preventDefault());

原文由 Hugo Barbosa 发布，翻译遵循 CC BY-SA 4.0 许可协议