Element: contextmenu 事件
当用户尝试打开上下文菜单时，会触发 contextmenu 事件。此事件通常由点击鼠标右键或按下上下文菜单键触发。
在后一种情况下，上下文菜单会显示在获得焦点的元素的左下方，除非该元素是树，在这种情况下，上下文菜单会显示在当前行的左下方。
任何未被禁用（通过调用点击事件的 preventDefault() 方法）的右键点击事件都会导致在目标元素上触发一个 contextmenu 事件。
注意： Firefox 中有一个例外：如果用户在右键点击时按住 Shift 键，则会显示上下文菜单，而不会触发 contextmenu 事件。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
addEventListener("contextmenu", (event) => { })
oncontextmenu = (event) => { }
事件类型
一个 PointerEvent。继承自 MouseEvent。
注意： 在规范的早期版本中，此事件的事件类型是 MouseEvent。有关更多信息，请查看浏览器兼容性。
事件属性
此接口继承自 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
<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
const noContext = document.getElementById("noContextMenu");
noContext.addEventListener("contextmenu", (e) => {
e.preventDefault();
});
结果
规范
| 规范 |
|---|
| UI 事件 # event-type-contextmenu |
浏览器兼容性
加载中…