鼠标事件

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 接口指用户与指针设备(如鼠标)交互时发生的事件。使用此接口的常见事件包括:clickdblclickmouseupmousedown

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

一些具体的事件都派生自 MouseEventWheelEventDragEvent

Event UIEvent MouseEvent

构造函数

MouseEvent()

生成一个新的 MouseEvent 对象

属性

这个接口也继承了UIEventEvent原型上的方法,

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 非标准 只读

强制点击所需的最小力量

方法

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

MouseEvent.getModifierState()

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

MouseEvent.initMouseEvent() 已弃用

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

示例

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

js
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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MouseEvent
MouseEvent() constructor
altKey
button
buttons
clientX
clientY
ctrlKey
getModifierState
"Accel" parameter
DeprecatedNon-standard
initMouseEvent
Deprecated
layerX
Non-standard
layerY
Non-standard
metaKey
movementX
movementY
offsetX
offsetY
pageX
pageY
relatedTarget
Available on DragEvent
screenX
screenY
shiftKey
x
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参考