MouseEvent - 表示用户与指示设备（如鼠标）交互发生的事件

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

MouseEvent 直接继承自 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.mozPressure 只读

在产生事件时施加在触摸或平板设备上的压力；这个值在 0.0（最小压力）到 1.0（最大压力）之间的范围内。您应该使用 PointerEvent 并查看它的 pressure 属性，而不是使用这个不废弃的（和非标准的）属性。

MouseEvent.mozInputSource 只读

生成事件的设备类型。例如，这可以让您确定鼠标事件是由实际的鼠标生成的还是由触摸事件生成的（这可能会影响解释与该事件关联的坐标的准确性）。

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 方法，模拟一个在复选框上的点击（即编程产生一个点击事件）。

<p><label><input type="checkbox" id="checkbox"> 已选中</label>
<p><button id="button">点击我</button>

<script>
function simulateClick() {
  var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window
  });
  var cb = document.getElementById("checkbox"); // 要点击的元素
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // 有处理程序调用了 preventDefault
    alert("已取消");
  } else {
    // 没有处理程序调用了 preventDefault
    alert("未取消");
  }
}
document.getElementById("button").addEventListener('click', simulateClick);
</script>

尝试一下 »

规范

规范	状态	备注
CSS Object Model (CSSOM) View Module MouseEvent 的定义	工作草案	将 MouseEvent 从 long 重新定义为 double。这意味着 PointerEvent 的 pointerType 将是一个 double。
Pointer Lock MouseEvent 的定义	候选推荐	基于 Document Object Model (DOM) Level 3 Events Specification，加入 movementX 和 movementY 属性。
CSS Object Model (CSSOM) View Module MouseEvent 的定义	工作草案	基于 Document Object Model (DOM) Level 3 Events Specification，加入 offsetX 和 offsetY，pageX 和 pageY，x 和 y 属性。将屏幕，页面，客户端和坐标（x 和 y）属性从 long 重新定义为 double。
UI Events MouseEvent 的定义	工作草案	-
Document Object Model (DOM) Level 3 Events Specification MouseEvent 的定义	已过时	基于 Document Object Model (DOM) Level 2 Events Specification，加入 MouseEvent() 的构造器， getModifierState() 方法和 buttons 属性。
Document Object Model (DOM) Level 2 Events Specification MouseEvent 的定义	已过时	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

1. 版本 9 之前使用不同的约定。

2. 限制取决于操作系统。

3. 在 mousemove 事件中，which 属性错误的始终设置为 1。

相关链接

• 它的直接父类，UIEvent。
• PointerEvent：用于高级指针事件，包括多点触摸。