鼠标事件

基线广泛可用

此功能已得到很好的确立，并且可以在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用 2015 年 7 月.

MouseEvent 接口表示由于用户与指向设备（例如鼠标）交互而发生的事件。使用此接口的常见事件包括 click、dblclick、mouseup、mousedown。

MouseEvent 派生自 UIEvent，后者又派生自 Event。尽管 MouseEvent.initMouseEvent() 方法保留用于向后兼容性，但 MouseEvent 对象的创建应使用 MouseEvent() 构造函数。

还有几个更具体的事件基于 MouseEvent，包括 WheelEvent、DragEvent 和 PointerEvent。

构造函数

MouseEvent(): 创建一个 MouseEvent 对象。

静态属性

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN 非标准只读: 正常点击所需的最小力度。
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN 非标准只读: 强制点击所需的最小力度。

实例属性

此接口还继承了其父级 UIEvent 和 Event 的属性。

MouseEvent.altKey 只读: 如果在触发鼠标事件时 alt 键按下，则返回 true。
MouseEvent.button 只读: 触发鼠标事件时按下的按钮编号（如果适用）。
MouseEvent.buttons 只读: 触发鼠标事件时按下的按钮（如果有）。
MouseEvent.clientX 只读: 鼠标指针在视口坐标中的 X 坐标。
MouseEvent.clientY 只读: 鼠标指针在视口坐标中的 Y 坐标。
MouseEvent.ctrlKey 只读: 如果在触发鼠标事件时 control 键按下，则返回 true。
MouseEvent.layerX 非标准只读: 返回相对于当前图层的事件的水平坐标。
MouseEvent.layerY 非标准只读: 返回相对于当前图层的事件的垂直坐标。
MouseEvent.metaKey 只读: 如果在触发鼠标事件时 meta 键按下，则返回 true。
MouseEvent.movementX 只读: 鼠标指针相对于最后一个 mousemove 事件位置的 X 坐标。
MouseEvent.movementY 只读: 鼠标指针相对于最后一个 mousemove 事件位置的 Y 坐标。
MouseEvent.offsetX 只读: 鼠标指针相对于目标节点的填充边缘位置的 X 坐标。
MouseEvent.offsetY 只读: 鼠标指针相对于目标节点的填充边缘位置的 Y 坐标。
MouseEvent.pageX 只读: 鼠标指针相对于整个文档的 X 坐标。
MouseEvent.pageY 只读: 鼠标指针相对于整个文档的 Y 坐标。
MouseEvent.relatedTarget 只读: 事件的次要目标（如果存在）。
MouseEvent.screenX 只读: 鼠标指针在屏幕坐标中的 X 坐标。
MouseEvent.screenY 只读: 鼠标指针在屏幕坐标中的 Y 坐标。
MouseEvent.shiftKey 只读: 如果在触发鼠标事件时 shift 键按下，则返回 true。
MouseEvent.mozInputSource 非标准只读: 生成事件的设备类型（MOZ_SOURCE_* 常量之一）。例如，这可以让您确定鼠标事件是由实际鼠标还是触摸事件生成的（这可能会影响您解释与事件相关的坐标的准确程度）。
MouseEvent.webkitForce 非标准只读: 点击时施加的压力大小。
MouseEvent.x 只读: MouseEvent.clientX 的别名。
MouseEvent.y 只读: MouseEvent.clientY 的别名。

实例方法

此接口还继承了其父接口 UIEvent 和 Event 的方法。

MouseEvent.getModifierState(): 返回指定修饰键的当前状态。有关详细信息，请参阅 KeyboardEvent.getModifierState()。
MouseEvent.initMouseEvent() 已弃用: 初始化创建的 MouseEvent 的值。如果事件已分派，则此方法不执行任何操作。

示例

此示例演示了使用 DOM 方法模拟复选框上的点击（以编程方式生成点击事件）。然后使用 EventTarget.dispatchEvent() 方法的返回值来确定事件状态（已取消或未取消）。

HTML

html

<p>
  <label><input type="checkbox" id="checkbox" /> Checked</label>
</p>
<p>
  <button id="button">Click me to send a MouseEvent to the checkbox</button>
</p>

JavaScript

function simulateClick() {
  // Get the element to send a click event
  const cb = document.getElementById("checkbox");

  // Create a synthetic click MouseEvent
  let evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  });

  // Send the event to the checkbox element
  cb.dispatchEvent(evt);
}
document.getElementById("button").addEventListener("click", simulateClick);

结果

规范

规范
用户界面事件 # interface-mouseevent
CSSOM 视图模块 # 鼠标事件接口的扩展
指针锁定 2.0 # 鼠标事件接口的扩展

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

其直接父级，UIEvent
PointerEvent：用于高级指针事件，包括多点触控