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

Question

当用户右键单击元素时,我希望我的网站能够进行自定义交互<div class="myElement"></div>.因此,当右键单击元素时,我不会弹出上下文菜单,以免破坏UX.有没有办法做到这一点(最好是CSS,但香草js也有效)？

期望:

.myElement {
    contextMenuOnRightClick: none,
}

Answer 1

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

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

更好的是,不是使用内联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()阻止浏览器触发默认操作

@RokoC.Buljan 我倾向于同意。我建议使用内联解决方案，因为如果 OP 以前没有使用过 JS，那么他们可能会更容易理解，并且他们对 CSS 的偏好意味着项目中可能没有太多其他 JS（至少是 OP 正在处理的部分）） (2认同)