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

Question

我希望我的网站在用户右键单击一个元素 <div class="myElement"></div> 时有自定义交互。因此，当元素被右键单击时，我不希望上下文菜单也弹出，以免破坏用户体验。是否有方法可以实现这一点（最好是使用CSS，但原始的JavaScript也可以）？

期望的结果：

.myElement {
    contextMenuOnRightClick: none,
}

- agreis1

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

---

尽量避免内联JS。 - Roko C. Buljan

为什么我们需要避免内联JS，除了它的丑陋之外？ - Iskandar Reza

如果你的项目中没有JS文件/脚本，那么这可能还算可以。但是一旦你的项目变得更加庞大，内嵌脚本会使你的项目难以维护。 - Roko C. Buljan

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

@Toastrackenigma，如果您不介意的话，我将这两个答案合并了。 - Roko C. Buljan

@RokoC.Buljan 太棒了，我也想建议类似的编辑 :) - Toastrackenigma

Answer 2

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

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

- Hugo Barbosa

Answer 3

需要指出几点：

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

• 您将编写很多纯vanilla JS代码，以使其在所有浏览器上运行，因为仅实现跨浏览器选择器就需要大量代码，而没有像jQuery这样的库。

• 为此添加超过50k的jQuery库是荒谬的（除非您当然需要该库进行其他操作）。

• 您仍然可以使用与JS等效物相同的值来内联它，并使您的代码看起来仍然美观。

• 支持使用JS动态添加到页面的项目需要大量工作。

使用类似以下内容：

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

- user5125586

---

好的观点，但是 "SpecificEvent".preventDefault() 不完全像 Event.stopPropagation() - 这可能确实会导致事件冒泡问题。 - Roko C. Buljan

为什么要用含糊的 return!1 呢？反正最后会被评估为“false”。我们应该编写易于理解的代码。同时，“return false”不建议使用，而是应该使用“preventDefault”（不停止事件传播）。 - Roko C. Buljan

:) 这很简单，但是... 是的 - Roko C. Buljan