鼠标事件

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 AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
MouseEventChrome 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 YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 47Firefox 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 Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 Full support 11.1WebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 11.3Samsung Internet Android Full support Yes
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 YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
ctrlKeyChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
getModifierStateChrome Full support 47Edge Full support 12Firefox Full support YesIE ? Opera Full support YesSafari ? WebView Android Full support 47Chrome Android Full support 47Firefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
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 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 Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
movementXChrome Full support 37
Full support 37
No support 22 — 37
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 13Firefox Full support 41
Full support 41
No support 1 — 41
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE No support NoOpera Full support YesSafari No support NoWebView Android Full support 37
Full support 37
No support ? — 37
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Chrome Android Full support 37
Full support 37
No support ? — 37
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Firefox Android Full support 41
Full support 41
No support 4 — 41
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
movementYChrome Full support 37
Full support 37
No support 22 — 37
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support 13Firefox Full support 41
Full support 41
No support 1 — 41
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE No support NoOpera Full support YesSafari No support NoWebView Android Full support 37
Full support 37
No support ? — 37
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Chrome Android Full support 37
Full support 37
No support ? — 37
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Firefox Android Full support 41
Full support 41
No support 4 — 41
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
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 YesFirefox Android Full support 43Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 YesFirefox Android Full support 43Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 45Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 45Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 NoFirefox 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 Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
shiftKeyChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 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 Full support YesChrome Android Full support YesFirefox Android Full support 53Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
y
Experimental
Chrome Full support YesEdge Full support 12Firefox Full support 53IE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 53Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

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.

参考