Movatterモバイル変換


[0]ホーム

URL:


  1. 面向开发者的 Web 技术
  2. Web API
  3. Element
  4. Element:contextmenu 事件

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in EnglishAlways switch to English

Element:contextmenu 事件

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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>这个段落右键菜单已被禁用。</p><p>但是这个段落没有被禁用。</p>

JavaScript

js
const noContext = document.getElementById("noContextMenu");noContext.addEventListener("contextmenu", (e) => {  e.preventDefault();});

结果

规范

Specification
UI Events
# event-type-contextmenu

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2026 Movatter.jp