MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

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.
Document Object Model (DOM) Level 3 Events Specification
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.

浏览器兼容性

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 ? ? ? ? ?

参考

文档标签和贡献者

 此页面的贡献者: doodlewind, Charley-Hsu, zhanglongdream, jimwmg, Dcfm, ziyunfei, qovciu
 最后编辑者: doodlewind,