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

Question

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

所需：

.myElement {
    contextMenuOnRightClick: none,
}

Answer 1

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

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

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

更好的是，不要使用内联JS ，而是创建可重用的className .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() 阻止浏览器触发默认操作

Answer 2

需要指出一些事情：

• Event.preventDefault（）可以运行，但是可能会在某些浏览器（例如Chrome）上产生错误/限制声音，并且由于您计划实施自定义操作，因此这可能不是您的最佳解决方案。

• 您将编写很多纯净的原始JS，以使其在所有浏览器中都能正常工作，因为仅实现跨浏览器选择器将需要大量代码，而没有像jQuery这样的库。

• 为这样的事情添加超过50k的jQuery库是荒谬的（除非您当然需要该库来完成其他工作）。

• 您仍然可以使用与JS同等含义相同的值来内联它，并使您的代码看起来仍然很漂亮。

• 要支持使用JS动态添加到页面中的项目，需要做很多工作。

使用类似这样的内容：

<div class="myElement" oncontextmenu="return!1"></div>