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

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

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

构造函数

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.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 的别名。

实例方法

这个接口也从父接口UIEvent 和Event 继承了方法。

MouseEvent.getModifierState()

返回指定修饰键的当前状态。请参照KeyboardEvent.getModifierState() 查看详情。

MouseEvent.initMouseEvent()已弃用

初始化创建MouseEvent 的值。如果这个事件已经被派发，这个方法将不会做任何事情。

示例

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

HTML

<p>  <label><input type="checkbox" /> 已点击</label></p><p>  <button>点击我，向复选框发送一个 MouseEvent</button></p>

JavaScript

function simulateClick() {  // 获取要发送 click 事件的元素  const cb = document.getElementById("checkbox");  // 创建一个合成的 click MouseEvent  let evt = new MouseEvent("click", {    bubbles: true,    cancelable: true,    view: window,  });  // 向复选框元素发送事件  cb.dispatchEvent(evt);}document.getElementById("button").addEventListener("click", simulateClick);

结果

规范

浏览器兼容性

参考

• 它的直接父级，UIEvent。