Element:contextmenu 事件

contextmenu 事件会在用户尝试打开上下文菜单时触发。该事件通常在鼠标点击右键或者按下键盘上的菜单键时被触发。

在后一种情况下,上下文菜单显示在聚焦元素的左下方,除非该元素是树形,在这种情况下,上下文菜单显示在当前行的左下方。

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

备注: Firefox 中的一个例外情况是:如果用户在右键单击时按住 Shift 键,则将显示上下文菜单,而不会触发 contextmenu 事件。

语法

在像 addEventListener() 这样的方法中使用事件名称,或设置事件处理器属性。

js
addEventListener("contextmenu", (event) => {});

oncontextmenu = (event) => {};

事件类型

PointerEvent,继承自 MouseEvent

Event UIEvent MouseEvent PointerEvent

备注: 在规范的早期版本中,该事件的事件类型是 MouseEvent,Firefox 和 Safari 中传递的仍然是这种类型。

事件属性

本接口从 MouseEventEvent 中继承属性。

PointerEvent.altitudeAngle 只读 实验性

表示传感器(指针或触控笔)轴与设备屏幕 X-Y 平面之间的角度。

PointerEvent.azimuthAngle 只读 实验性

表示 Y-Z 平面与包含传感器(指针或测针)轴和 Y 轴的平面之间的夹角。

PointerEvent.pointerId 只读

引起事件的指针的唯一标识符。

PointerEvent.width 只读

指针接触几何图形的宽度(X 轴上的大小),单位为 CSS 像素。

PointerEvent.height 只读

指针接触几何图形的高度(Y 轴上的大小),单位为 CSS 像素。

PointerEvent.pressure 只读

指针输入在 01 范围内的归一化压力,其中 01 分别代表硬件能够检测到的最小和最大压力。

PointerEvent.tangentialPressure 只读

指针输入的归一化切向压力(也称为料筒压力或料筒应力),范围为 -11,其中 0 为控制器的中间位置。

PointerEvent.tiltX 只读

Y-Z 平面与包含指针(如手写笔)轴和 Y 轴的平面之间的平面角度(度数,范围为 -9090)。

PointerEvent.tiltY 只读

X-Z 平面与包含指针(如手写笔)轴和 X 轴的平面之间的平面角度(度数,范围为 -9090)。

PointerEvent.twist 只读

指针(如手写笔)绕其主轴的顺时针旋转角度,单位为度,数值范围为 0359

PointerEvent.pointerType 只读

表示引起事件的设备类型(鼠标、笔、触摸等)。

PointerEvent.isPrimary 只读

指示指针是否代表该指针类型的主指针。

示例

取消 contextmenu 事件

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

备注: 在 Firefox 中,如果在右键单击时按住 Shift 键,则会显示上下文菜单,而不会触发 contextmenu 事件。因此,取消事件并不能阻止上下文菜单的显示。

HTML

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

JavaScript

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

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

结果

规范

Specification
UI Events
# event-type-contextmenu

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
contextmenu event
Is a PointerEvent
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

参见