元素：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() 取消 contextmenu 事件的默认操作。因此，当右键单击第一段时，它将不会执行任何操作，而第二段将显示浏览器提供的标准上下文菜单。

注意：在 Firefox 中，如果您在右键单击时按住 Shift 键，则会显示上下文菜单，而不会触发 contextmenu 事件。因此，取消事件不会阻止上下文菜单显示。

HTML

html
<p id="noContextMenu">The context menu has been disabled on this paragraph.</p>
<p>But it has not been disabled on this one.</p>

JavaScript

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

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

结果

规范

规范
UI 事件
# event-type-contextmenu

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅