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

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

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

构造函数

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_* 常量如下列出)。可通过该属性获知鼠标事件是否由真实鼠标设备触发,亦或通过触摸事件触发(这可能影响处理坐标事件时的精确程度)。
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方法在复选框上模拟一个点击事件(使用编程的方式生成点击事件)。

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
CSS Object Model (CSSOM) View Module
MouseEvent
Working Draft Redefines MouseEvent from long to double. This means that a PointerEvent whose pointerType is mouse will be a double.
Pointer Lock
MouseEvent
Candidate Recommendation From Document Object Model (DOM) Level 3 Events Specification, added movementX and movementY properties.
CSS Object Model (CSSOM) View Module
MouseEvent
Working Draft From Document Object Model (DOM) Level 3 Events Specification, added offsetX and offsetY, pageX and pageY, x, and y properties. Redefined screen, page, client and coordinate (x and y) properties as double from long.
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.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
MouseEvent() constructorChrome Full support 47Edge ? Firefox Full support 11IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support 47Chrome Android Full support 47Edge Mobile ? Firefox Android Full support 14Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
altKeyChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
buttonChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9
Full support 9
Full support Yes
Notes
Notes Different convention used prior to version 9.
Opera Full support YesSafari Full support 3.1WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
buttonsChrome Full support 43Edge Full support 12Firefox Full support Yes
Notes
Full support Yes
Notes
Notes Resrictions apply depending on OS.
IE Full support 9Opera Full support YesSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS No support NoSamsung Internet Android ?
clientXChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
clientYChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
ctrlKeyChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
getModifierStateChrome Full support 47Edge Full support 12Firefox ? IE ? Opera ? Safari ? WebView Android Full support 47Chrome Android Full support 47Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
initMouseEvent
DeprecatedNon-standard
Chrome Full support YesEdge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?
metaKeyChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
movementXChrome Full support 37
Full support 37
No support 22 — 37
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support YesFirefox Full support 41
Full support 41
No support 1 — 41
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE No support NoOpera ? Safari No support NoWebView Android Full support 37Chrome Android Full support 37
Full support 37
No support ? — 37
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Mobile Full support YesFirefox Android Full support 41
Full support 41
No support 4 — 41
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android ? Safari iOS No support NoSamsung Internet Android ?
movementYChrome Full support 37
Full support 37
No support 22 — 37
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support YesFirefox Full support 41
Full support 41
No support 1 — 41
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE No support NoOpera ? Safari No support NoWebView Android Full support 37Chrome Android Full support 37
Full support 37
No support ? — 37
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Mobile Full support YesFirefox Android Full support 41
Full support 41
No support 4 — 41
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android ? Safari iOS No support NoSamsung Internet Android ?
offsetX
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support 39IE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 43Opera Android ? Safari iOS ? Samsung Internet Android ?
offsetY
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support 39IE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 43Opera Android ? Safari iOS ? Samsung Internet Android ?
pageX
Experimental
Chrome Full support 45Edge Full support 12Firefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support 45Chrome Android Full support 45Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
pageY
Experimental
Chrome Full support 45Edge Full support 12Firefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support 45Chrome Android Full support 45Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
regionChrome Full support Yes
Disabled
Full support 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 ? Firefox Full support 30
Disabled
Full support 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 support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android Full support 30
Disabled
Full support 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 support NoSafari iOS No support NoSamsung Internet Android ?
relatedTargetChrome Full support YesEdge Full support 12Firefox Full support 48IE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
screenXChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
screenYChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
shiftKeyChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
which
Non-standard
Chrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes On mousemove events, the which property is incorrectly always set to 1.
IE Full support 9Opera Full support 5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes On mousemove events, the which property is incorrectly always set to 1.
Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
x
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support 53IE Full support 6Opera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 53Opera Android ? Safari iOS ? Samsung Internet Android ?
y
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support 53IE Full support 6Opera Full support YesSafari Full support YesWebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 53Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参考

文档标签和贡献者

最后编辑者: mdnwebdocs-bot,