鼠标事件

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

MouseEvent 接口指用户与指针设备（如鼠标）交互时发生的事件。使用此接口的常见事件包括：click、dblclick、mouseup、mousedown。

MouseEvent 派生自 UIEvent，UIEvent 派生自 Event。虽然 MouseEvent.initMouseEvent() 方法保持向后兼容性，但是应该使用 MouseEvent() 构造函数创建一个 MouseEvent 对象。

一些具体的事件都派生自 MouseEvent：WheelEvent 和DragEvent。

构造函数

MouseEvent(): 生成一个新的 MouseEvent 对象

属性

这个接口也继承了UIEvent 和 Event原型上的方法，

MouseEvent.altKey 只读: 当鼠标事件触发的时，如果 alt 键被按下，返回 true;
MouseEvent.button 只读: 当鼠标事件触发的时，如果鼠标按钮被按下（如果有的话），将会返回一个数值。
MouseEvent.buttons 只读: 当鼠标事件触发的时，如果多个鼠标按钮被按下（如果有的话），将会返回一个或者多个代表鼠标按钮的数字。
MouseEvent.clientX 只读: 鼠标指针在点击元素（DOM）中的 X 坐标。
MouseEvent.clientY 只读: 鼠标指针在点击元素（DOM）中的 Y 坐标。
MouseEvent.ctrlKey 只读: 当鼠标事件触发时，如果 control 键被按下，则返回 true；
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.region 只读: 返回被点击事件影响的点击区域的 id，如果没有区域被影响则返回 null。
MouseEvent.relatedTarget 只读: 鼠标事件的次要目标（如果有的话）
MouseEvent.screenX 只读: 鼠标指针相对于全局（屏幕）的 X 坐标；
MouseEvent.screenY 只读: 鼠标指针相对于全局（屏幕）的 Y 坐标；
MouseEvent.shiftKey 只读: 当鼠标事件触发时，如果 shift 键被按下，则返回 true；
MouseEvent.which 非标准只读: 当鼠标事件触发时，表示被按下的按钮。
MouseEvent.mozInputSource 非标准只读: 生成事件的类型（若干 MOZ_SOURCE_*常量如下列出）。可通过该属性获知鼠标事件是否由真实鼠标设备触发，亦或通过触摸事件触发（这可能影响处理坐标事件时的精确程度）。
MouseEvent.webkitForce 非标准只读: 点击时施加的压力量。
MouseEvent.x 实验性只读: MouseEvent.clientX的别名。
MouseEvent.y 实验性只读: MouseEvent.clientY的别名。

常量

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

方法

这个接口也继承了它的副方法UIEvent 和Event.

MouseEvent.getModifierState(): 返回指定修饰键的当前状态。请参照KeyboardEvent.getModifierState() 查看详情。
MouseEvent.initMouseEvent() 已弃用: 初始化创建 MouseEvent 的值。如果这个事件已经被分派，这个方法将不会做任何事情。

示例

这个例子演示了使用 DOM 方法在复选框上模拟一个点击事件（使用编程的方式生成点击事件）。

function simulateClick() {
  var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  });
  var cb = document.getElementById("checkbox"); //element to click on
  var canceled = !cb.dispatchEvent(evt);
  if (canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}
document.getElementById("button").addEventListener("click", simulateClick);

html

<p>
  <label><input type="checkbox" id="checkbox" /> Checked</label>
</p>
<p><button id="button">Click me</button></p>

点击按钮查看演示：

规范

Specification
UI Events # interface-mouseevent
CSSOM View Module # extensions-to-the-mouseevent-interface
Pointer Lock 2.0 # extensions-to-the-mouseevent-interface

浏览器兼容性

BCD tables only load in the browser

参考

它的直接父级，UIEvent.