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

Question

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

期望:

.myElement {
    contextMenuOnRightClick: none,
}

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() 阻止浏览器触发默认操作