MouseEvent()

MouseEvent() 构造器创建一个 MouseEvent

语法

 event = new MouseEvent(typeArg, mouseEventInit);

形参

typeArg
DOMString 格式的事件名称。
mouseEventInit 可选
初始化 MouseEvent 的字典,有下列属性字段:
  • "screenX"long 型可选,默认为 0,设置鼠标事件发生时相对于用户屏幕的水平坐标位置;该操作并不会改变真实鼠标的位置。
  • "screenY"long 型可选,默认为 0,设置鼠标事件发生时相对于用户屏幕的垂直坐标位置;该操作并不会改变真实鼠标的位置。
  • "clientX"long 型可选,默认为 0,设置鼠标事件时相对于客户端窗口的水平坐标位置;该操作并不会改变真实鼠标的位置。
  • "clientY"long 型可选,默认为 0,设置鼠标事件时相对于客户端窗口的垂直坐标位置;该操作并不会改变真实鼠标的位置。
  • "ctrlKey"Boolean 型可选,默认为false,标明是否同时按下 ctrl 键。
  • "shiftKey"Boolean 型可选,默认为false,标明是否同时按下 shift 键。
  • "altKey"Boolean 型可选,默认为 false,标明是否同时按下 alt 键。
  • "metaKey"Boolean 型可选,默认为false,标明是否同时按下 meta 键。
  • "button"short 型可选,默认为 0,描述了当事件发生时,哪个按键被按下或释放:
    含义
    0 主按键被按下(通常为左键)或未初始化
    1 辅助按键被按下 (通常为中键)
    2 次按键被按下 (通常为右键)
  • "buttons",无符号 short 型可选,默认为 0,描述了当事件发生时哪些按键被按下:
    位域值
    (Bit-field value)
    含义
    0 无按键被按下
    1 主按键被按下 (通常为左键)
    2 次按键被按下 (通常为右键)
    4 辅助按键被按下 (通常为中键)
  • "relatedTarget"EventTarget 型可选,默认为 null,若事件为 mouseenter 或 mouseover,则表示刚离开的元素;若事件我 mouseout 或 mouseleave,则表示刚进入的元素。
  • "region"DOMString 型可选,默认为null,标明点击事件影响的区域 DOM 的 id。不影响任何区域的话,请传null值。

在一些实现中,passing anything other than a number for the screen and client fields will throw a TypeError.

上述 MouseEventInit 字典字段还包括从 UIEventInit 和 EventInit 继承来的字典字段。

规范

Specification Status Comment
HTML Living Standard
region value
Living Standard From Document Object Model (DOM) Level 3 Events Specification, added the "region" value in the dictionary.
Document Object Model (DOM) Level 3 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
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 ?
Support for mouseEventInit optional region fieldChrome Full support 51
Notes Disabled
Full support 51
Notes Disabled
Notes Flag needed to retrieve value from MouseEvent.region.
Disabled From version 51: 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 32IE No support NoOpera ? Safari ? WebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android Full support 32Opera Android ? Safari iOS ? Samsung Internet Android ?
Redefined mouseEventInit fields from long to doubleChrome Full support 56Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android Full support 56Chrome Android Full support 56Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Polyfill

You can polyfill the MouseEvent() constructor functionality in Internet Explorer 9 and higher with the following code:

(function (window) {
  try {
    new MouseEvent('test');
    return false; // No need to polyfill
  } catch (e) {
		// Need to polyfill - fall through
  }

    // Polyfills DOM4 MouseEvent
	var MouseEventPolyfill = function (eventType, params) {
		params = params || { bubbles: false, cancelable: false };
		var mouseEvent = document.createEvent('MouseEvent');
		mouseEvent.initMouseEvent(eventType, 
			params.bubbles,
			params.cancelable,
			window,
			0,
			params.screenX || 0,
			params.screenY || 0,
			params.clientX || 0,
			params.clientY || 0,
			params.ctrlKey || false,
			params.altKey || false,
			params.shiftKey || false,
			params.metaKey || false,
			params.button || 0,
			params.relatedTarget || null
		);

		return mouseEvent;
	}

	MouseEventPolyfill.prototype = Event.prototype;

	window.MouseEvent = MouseEventPolyfill;
})(window);

参见

文档标签和贡献者

此页面的贡献者: RainSlide, mdnwebdocs-bot, army8735
最后编辑者: RainSlide,