MouseEvent

MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click , dblclick , mouseup , mousedown .

MouseEvent derives from UIEvent , which in turn derives from Event . Though the MouseEvent.initMouseEvent() method is kept for backward compatibility, creating of a MouseEvent object should be done using the MouseEvent() 构造函数。

Several more specific events are based on MouseEvent ,包括 WheelEvent and DragEvent .

构造函数

MouseEvent()
创建 MouseEvent 对象。

特性

This interface also inherits properties of its parents, UIEvent and Event .

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 control 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 只读
Alias for MouseEvent.clientX .
MouseEvent.y 只读
Alias for MouseEvent.clientY

常量

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN 只读
Minimum force necessary for a normal click
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN 只读
Minimum force necessary for a force click

方法

This interface also inherits methods of its parents, UIEvent and Event .

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

结果

规范

规范 状态 Comment
CSS Object Model (CSSOM) View Module
The definition of 'MouseEvent' in that specification.
工作草案 Redefines MouseEvent from long to double. This means that a PointerEvent whose pointerType is mouse will be a double.
Pointer Lock
The definition of 'MouseEvent' in that specification.
候选推荐 From Document Object Model (DOM) Level 3 Events Specification , added movementX and movementY 特性。
CSS Object Model (CSSOM) View Module
The definition of 'MouseEvent' in that specification.
工作草案 From Document Object Model (DOM) Level 3 Events Specification , added 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
The definition of 'MouseEvent' in that specification.
工作草案
Document Object Model (DOM) Level 3 Events Specification
The definition of 'MouseEvent' in that specification.
Obsolete From Document Object Model (DOM) Level 2 Events Specification , added the MouseEvent() constructor, the getModifierState() 方法和 buttons 特性。
Document Object Model (DOM) Level 2 Events Specification
The definition of 'MouseEvent' in that specification.
Obsolete 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
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 Experimental Web Platform Features preference (needs to be set to true ). To change preferences in Chrome, visit chrome://flags.
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
Disabled
30
Disabled
Disabled From version 30: this feature is behind the canvas.hitregions.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
IE No Opera No Safari No WebView Android No Chrome Android No Firefox Android 30
Disabled
30
Disabled
Disabled From version 30: this feature is behind the canvas.hitregions.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
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

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
弃用。不要用于新网站。
见实现注意事项。
用户必须明确启用此特征。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。
要求使用供应商前缀或不同名称。

另请参阅