Element: contextmenu event

contextmenu 事件会在用户尝试打开上下文菜单时被触发。该事件通常在鼠标点击右键或者按下键盘上的菜单键时被触发,如果使用菜单键,该上下文菜单会被展示 到所聚焦元素的左下角,但是如果该元素是一棵 DOM 树的话,上下文菜单便会展示在当前这一行的左下角。

任何没有被禁用的鼠标右击事件 (通过调用事件的 preventDefault() 方法) 将会使得 contextmenu 事件在目标元素上被触发。

Bubbles(冒泡) Yes
Cancelable(可撤销) Yes
Interface(接口) MouseEvent
Event handler property(事件处理器) oncontextmenu

示例

在下面的例子中,第一段内容被触发的 contextmenu 事件的默认行为被 preventDefault() 取消了,因此,在第一段右击鼠标时什么也不会发生,但是右键单击第二段内容时,则会出现标准的菜单内容,与平时右击普通页面出现的菜单内容一致。

HTML

html
<p id="noContextMenu">这个段落右键菜单已被禁用。</p>
<p>但是这个段落没有被禁用。</p>

JavaScript

js
noContext = document.getElementById("noContextMenu");

noContext.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});

结果

规范

Specification
UI Events
# event-type-contextmenu

浏览器兼容性

BCD tables only load in the browser

参见