在此页

• 构造函数
• 特性
• 常量
• 方法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

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

MouseEvent 派生自 UIEvent ，依次派生自 事件 。虽然 MouseEvent.initMouseEvent() 方法保持向后兼容，创建 MouseEvent 对象应该使用 MouseEvent() 构造函数。

几个更具体事件基于 MouseEvent ，包括 WheelEvent and DragEvent .

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="../API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25  86,20  86,30  76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/UIEvent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="153.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">UIEvent</text></a><polyline points="191,25  201,20  201,30  191,25" stroke="#D4DDE4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/MouseEvent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="281" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">MouseEvent</text></a></svg></div>
					

  a:hover text { fill: #0095DD; pointer-events: all;}
					

构造函数

MouseEvent()

创建 MouseEvent 对象。

特性

此接口还继承其父级的特性， UIEvent and 事件 .

MouseEvent.altKey 只读

返回 true 若 alt key was down when the mouse event was fired.

MouseEvent.button 只读

The button number that was pressed (if applicable) when the mouse event was fired.

MouseEvent.buttons 只读

The buttons being depressed (if any) when the mouse event was fired.

MouseEvent.clientX 只读

The X coordinate of the mouse pointer in local (DOM content) coordinates.

MouseEvent.clientY 只读

The Y coordinate of the mouse pointer in local (DOM content) coordinates.

MouseEvent.ctrlKey 只读

返回 true 若 控制 key was down when the mouse event was fired.

MouseEvent.metaKey 只读

返回 true 若 meta key was down when the mouse event was fired.

MouseEvent.movementX 只读

The X coordinate of the mouse pointer relative to the position of the last mousemove 事件。

MouseEvent.movementY 只读

The Y coordinate of the mouse pointer relative to the position of the last mousemove 事件。

MouseEvent.offsetX 只读

The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.

MouseEvent.offsetY 只读

The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.

MouseEvent.pageX 只读

The X coordinate of the mouse pointer relative to the whole document.

MouseEvent.pageY 只读

The Y coordinate of the mouse pointer relative to the whole document.

MouseEvent.region 只读

Returns the id of the hit region affected by the event. If no hit region is affected, null 被返回。

MouseEvent.relatedTarget 只读

The secondary target for the event, if there is one.

MouseEvent.screenX 只读

The X coordinate of the mouse pointer in global (screen) coordinates.

MouseEvent.screenY 只读

The Y coordinate of the mouse pointer in global (screen) coordinates.

MouseEvent.shiftKey 只读

返回 true 若 shift key was down when the mouse event was fired.

MouseEvent.which 只读

The button being pressed when the mouse event was fired.

MouseEvent.mozPressure 只读

The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). Instead of using this deprecated (and non-standard) property, you should instead use PointerEvent and look at its pressure 特性。

MouseEvent.mozInputSource 只读

The type of device that generated the event (one of the MOZ_SOURCE_* constants listed below). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).

MouseEvent.webkitForce 只读

The amount of pressure applied when clicking

MouseEvent.x 只读

别名化的 MouseEvent.clientX .

MouseEvent.y 只读

别名化的 MouseEvent.clientY

常量

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN 只读

正常点击所需的最小力

MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN 只读

强制点击所需的最小力

方法

此接口还继承其父级方法， UIEvent and 事件 .

MouseEvent.getModifierState()

Returns the current state of the specified modifier key. See the KeyboardEvent.getModifierState () 了解细节。

MouseEvent.initMouseEvent()

Initializes the value of a MouseEvent created. If the event has already being dispatched, this method does nothing.

范例

This example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using DOM methods.

HTML

<p><label><input type="checkbox" id="checkbox"> Checked</label>
<p><button id="button">Click me</button>
						

JavaScript

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);
						

结果

规范

规范	状态	注释
CSSOM (CSS 对象模型) 视图模块 在该规范中的 MouseEvent 定义。	工作草案	重新定义 MouseEvent from long to double. This means that a PointerEvent whose pointerType is mouse will be a double.
指针锁 在该规范中的 MouseEvent 定义。	候选推荐	从 DOM (文档对象模型) 3 级事件规范 ，添加 movementX and movementY 特性。
CSSOM (CSS 对象模型) 视图模块 在该规范中的 MouseEvent 定义。	工作草案	从 DOM (文档对象模型) 3 级事件规范 ，添加 offsetX and offsetY , pageX and pageY , x ，和 y properties. Redefined screen, page, client, and coordinate (x and y) properties as double from long .
UI Events 在该规范中的 MouseEvent 定义。	工作草案
DOM (文档对象模型) 3 级事件规范 在该规范中的 MouseEvent 定义。	过时	从 DOM (文档对象模型) 2 级事件规范 ，添加 MouseEvent() 构造函数， getModifierState() 方法和 buttons 特性。
DOM (文档对象模型) 2 级事件规范 在该规范中的 MouseEvent 定义。	过时	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
MouseEvent	Chrome 1	Edge 12	Firefox 1	IE 9	Opera 10.6	Safari 3.1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 11	Safari iOS 2	Samsung Internet Android 1.0
MouseEvent() 构造函数	Chrome 47	Edge ≤79	Firefox 11	IE No	Opera Yes	Safari Yes	WebView Android 47	Chrome Android 47	Firefox Android 14	Opera Android Yes	Safari iOS Yes	Samsung Internet Android 5.0
altKey	Chrome Yes	Edge 12	Firefox Yes	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
button	Chrome 1	Edge 12	Firefox 1	IE 9	Opera 10.6	Safari 3.1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 11	Safari iOS 2	Samsung Internet Android 1.0
buttons	Chrome 43	Edge 12	Firefox Yes Yes Resrictions apply depending on OS.	IE 9	Opera Yes	Safari 11.1	WebView Android No	Chrome Android No	Firefox Android Yes	Opera Android Yes	Safari iOS 11.3	Samsung Internet Android No
clientX	Chrome 1	Edge 12	Firefox 1	IE 9	Opera 10.6	Safari 3.1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 11	Safari iOS 2	Samsung Internet Android 1.0
clientY	Chrome Yes	Edge 12	Firefox Yes	IE 9	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
ctrlKey	Chrome Yes	Edge 12	Firefox Yes	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
getModifierState	Chrome 47	Edge 12	Firefox Yes	IE ?	Opera Yes	Safari ?	WebView Android 47	Chrome Android 47	Firefox Android Yes	Opera Android Yes	Safari iOS ?	Samsung Internet Android 5.0
initMouseEvent 弃用 非标	Chrome Yes	Edge 12	Firefox Yes	IE ?	Opera Yes	Safari ?	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS ?	Samsung Internet Android Yes
metaKey	Chrome Yes	Edge 12	Firefox Yes	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
movementX	Chrome 37 37 不支持 22 — 37 Prefixed Prefixed Implemented with the vendor prefix: webkit	Edge 13	Firefox 41 41 不支持 1 — 41 Prefixed Prefixed Implemented with the vendor prefix: moz	IE No	Opera Yes	Safari 9 9 不支持 6 — 8 Prefixed Prefixed Implemented with the vendor prefix: webkit	WebView Android 37 37 不支持 ? — 37 Prefixed Prefixed Implemented with the vendor prefix: webkit	Chrome Android 37 37 不支持 ? — 37 Prefixed Prefixed Implemented with the vendor prefix: webkit	Firefox Android 41 41 不支持 4 — 41 Prefixed Prefixed Implemented with the vendor prefix: moz	Opera Android Yes	Safari iOS 8 8 不支持 6 — 8 Prefixed Prefixed Implemented with the vendor prefix: webkit	Samsung Internet Android 3.0 3.0 不支持 ? — 3.0 Prefixed Prefixed Implemented with the vendor prefix: webkit
movementY	Chrome 37 37 不支持 22 — 37 Prefixed Prefixed Implemented with the vendor prefix: webkit	Edge 13	Firefox 41 41 不支持 1 — 41 Prefixed Prefixed Implemented with the vendor prefix: moz	IE No	Opera Yes	Safari 9 9 不支持 6 — 8 Prefixed Prefixed Implemented with the vendor prefix: webkit	WebView Android 37 37 不支持 ? — 37 Prefixed Prefixed Implemented with the vendor prefix: webkit	Chrome Android 37 37 不支持 ? — 37 Prefixed Prefixed Implemented with the vendor prefix: webkit	Firefox Android 41 41 不支持 4 — 41 Prefixed Prefixed Implemented with the vendor prefix: moz	Opera Android Yes	Safari iOS 8 8 不支持 6 — 8 Prefixed Prefixed Implemented with the vendor prefix: webkit	Samsung Internet Android 3.0 3.0 不支持 ? — 3.0 Prefixed Prefixed Implemented with the vendor prefix: webkit
offsetX	Chrome Yes	Edge 12	Firefox 39	IE 9	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 43	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
offsetY	Chrome Yes	Edge 12	Firefox 39	IE 9	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 43	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
pageX	Chrome 45	Edge 12	Firefox Yes	IE 9	Opera Yes	Safari Yes	WebView Android 45	Chrome Android 45	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android 5.0
pageY	Chrome 45	Edge 12	Firefox Yes	IE 9	Opera Yes	Safari Yes	WebView Android 45	Chrome Android 45	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android 5.0
region	Chrome Yes Disabled Yes Disabled Disabled This feature is behind the ). To change preferences in Chrome, visit	Edge ≤79 Disabled ≤79 Disabled Disabled From version ≤79: this feature is behind the Experimental Web Platform Features preference (needs to be set to true ).	Firefox 30	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android 30	Opera Android No	Safari iOS No	Samsung Internet Android No
relatedTarget	Chrome Yes	Edge 12	Firefox 48	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
screenX	Chrome Yes	Edge 12	Firefox Yes	IE 9	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
screenY	Chrome Yes	Edge 12	Firefox Yes	IE 9	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
shiftKey	Chrome Yes	Edge 12	Firefox Yes	IE Yes	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
which 非标	Chrome 1	Edge 12	Firefox 1 1 On mousemove events, the which property is incorrectly always set to 1 .	IE 9	Opera 10.6	Safari 3.1	WebView Android Yes	Chrome Android Yes	Firefox Android 4 4 On mousemove events, the which property is incorrectly always set to 1 .	Opera Android 11	Safari iOS Yes	Samsung Internet Android Yes
x	Chrome Yes	Edge 12	Firefox 53	IE 9	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 53	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
y	Chrome Yes	Edge 12	Firefox 53	IE 9	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 53	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

非标。预期跨浏览器支持较差。

非标。预期跨浏览器支持较差。

弃用。不要用于新网站。

弃用。不要用于新网站。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• 其直接父级， UIEvent .
• PointerEvent ：用于高级指针事件，包括多点触摸

元数据

• 最后修改： Feb 13, 2020

相关话题

1. MouseEvent
2. 构造函数

   1. MouseEvent()
3. 特性

   1. altKey
   2. button
   3. buttons
   4. clientX
   5. clientY
   6. ctrlKey
   7. metaKey
   8. movementX
   9. movementY
   10. mozInputSource
   11. offsetX
   12. offsetY
   13. pageX
   14. pageY
   15. region
   16. relatedTarget
   17. screenX
   18. screenY
   19. shiftKey
   20. WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN
   21. WEBKIT_FORCE_AT_MOUSE_DOWN
   22. webkitForce
   23. which
   24. x
   25. y
4. 方法

   1. getModifierState()
   2. initMouseEvent()
5. 继承：

   1. UIEvent
   2. 事件
6. DOM 事件相关页面

   1. CompositionEvent
   2. 事件
   3. EventListener
   4. EventTarget
   5. FocusEvent
   6. InputEvent
   7. KeyboardEvent
   8. MouseScrollEvent
   9. MouseWheelEvent
   10. MutationEvent
   11. ProgressEvent
   12. UIEvent
   13. WheelEvent