Element：contextmenu 事件

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

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

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

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

语法

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

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

oncontextmenu = (event) => {};

事件类型

PointerEvent，继承自 MouseEvent。

Event UIEvent MouseEvent PointerEvent

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

事件属性

本接口从 MouseEvent 和 Event 中继承属性。

PointerEvent.altitudeAngle 只读

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

PointerEvent.azimuthAngle 只读

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

PointerEvent.pointerId 只读

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

PointerEvent.width 只读

指针接触几何图形的宽度（X 轴上的大小），单位为 CSS 像素。

PointerEvent.height 只读

指针接触几何图形的高度（Y 轴上的大小），单位为 CSS 像素。

PointerEvent.pressure 只读

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

PointerEvent.tangentialPressure 只读

指针输入的归一化切向压力（也称为料筒压力或料筒应力），范围为 -1 至 1，其中 0 为控制器的中间位置。

PointerEvent.tiltX 只读

Y-Z 平面与包含指针（如手写笔）轴和 Y 轴的平面之间的平面角度（度数，范围为 -90 至 90）。

PointerEvent.tiltY 只读

X-Z 平面与包含指针（如手写笔）轴和 X 轴的平面之间的平面角度（度数，范围为 -90 至 90）。

PointerEvent.twist 只读

指针（如手写笔）绕其主轴的顺时针旋转角度，单位为度，数值范围为 0 至 359。

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

浏览器兼容性

BCD tables only load in the browser

参见