We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

MouseEvent 接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括:clickdblclickmouseupmousedown

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

一些具体的事件都派生自 MouseEventWheelEvent and 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(最大压力)之间。
MouseEvent.mozInputSource 只读
生成事件的类型(若干 MOZ_SOURCE_* 常量如下列出)。可通过该属性获知鼠标事件是否由真实鼠标设备触发,亦或通过触摸事件触发(这可能影响处理坐标事件时的精确程度)。可选常量值如下:
Constant name Value Desription
MouseEvent.MOZ_SOURCE_UNKNOWN 0 The input device is unknown.
MouseEvent.MOZ_SOURCE_MOUSE 1 The event was generated by a mouse (or mouse-like device).
MouseEvent.MOZ_SOURCE_PEN 2 The event was generated by a pen on a tablet.
MouseEvent.MOZ_SOURCE_ERASER 3 The event was generated by an eraser on a tablet.
MouseEvent.MOZ_SOURCE_CURSOR 4 The event was generated by a cursor.
MouseEvent.MOZ_SOURCE_TOUCH 5 The event was generated on a touch interface.
MouseEvent.MOZ_SOURCE_KEYBOARD 6 The event was generated by a keyboard.
MouseEvent.webkitForce 只读
点击时施加的压力量。
MouseEvent.x 只读
MouseEvent.clientX的别名。
MouseEvent.y 只读
 MouseEvent.clientY的别名。

方法

这个接口也继承了它的副方法UIEventEvent.

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);
<p><label><input type="checkbox" id="checkbox"> Checked</label>
<p><button id="button">Click me</button>

点击按钮查看例子演示:

规范

Specification Status Comment
HTML Living Standard
MouseEvent.region
Living Standard From Document Object Model (DOM) Level 3 Events Specification, added the region property.
Pointer Lock
MouseEvent
Candidate Recommendation From Document Object Model (DOM) Level 3 Events Specification, added movementX and movementY properties.
Unknown
MouseEvent
Obsolete From Document Object Model (DOM) Level 2 Events Specification, added the MouseEvent() constructor, the getModifierState() method and the buttons property.
Document Object Model (DOM) Level 2 Events Specification
MouseEvent
Obsolete Initial definition.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
movementX
movementY
(Yes) moz (Yes) webkit ? ? ?
buttons (Yes) 未实现 ? ? ?
which 1.0 1.0 9.0 5.0 1.0
getModifierState() 15 (15) (Yes) (Yes) (Yes) (Yes)
mozPressure and mozInputSource 4.0 (2) 未实现 未实现 未实现 未实现
MouseEvent() 11 (11) (Yes) ? (Yes) ?
MouseEvent.region 32 (32) ? ? ? ?
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

参考

文档标签和贡献者

最后编辑者: fedorjia,