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.

浏览器兼容性

BCD tables only load in the browser

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

参见