鼠标事件

MouseEvent 接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click，dblclick，mouseup，mousedown。

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

一些具体的事件都派生自 MouseEvent：WheelEvent and DragEvent。

Constructor

MouseEvent()

Creates a MouseEvent object.

Properties

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

MouseEvent.altKey 只读

Returns true if the alt key was down when the mouse event was fired.

当鼠标事件触发的时候，如果 alt 键被按下，返回true;

MouseEvent.button 只读

The button number that was pressed when the mouse event was fired. 

当鼠标事件触发的时候，鼠标哪个按钮被按下。

MouseEvent.buttons 只读

The buttons being pressed when the mouse event was fire

MouseEvent.clientX 只读

The X coordinate of the mouse pointer in local (DOM content) coordinates.

clientX属性代表点击在元素上的鼠标指针的X坐标；

MouseEvent.clientY 只读

The Y coordinate of the mouse pointer in local (DOM content) coordinates.

clientY属性代表点击在元素上的鼠标指针的Y坐标；

MouseEvent.ctrlKey 只读

Returns true if the control key was down when the mouse event was fired.

当鼠标事件触发时，如果 control 键被按下，则返回 true；

MouseEvent.metaKey 只读

Returns true if the meta key was down when the mouse event was fired.

当鼠标事件触发时，如果 meta 键被按下，则返回 true；

MouseEvent.movementX 只读

The X coordinate of the mouse pointer relative to the position of the last mousemove event.

MouseEvent.movementY 只读

The Y coordinate of the mouse pointer relative to the position of the last mousemove event.

MouseEvent.region 只读

Returns the id of the hit region affected by the event. If no hit region is affected, null is returned.

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.

screenX属性代表点击在元素上的鼠标指针相对于屏幕的X坐标；

MouseEvent.screenY 只读

The Y coordinate of the mouse pointer in global (screen) coordinates.

screenY属性代表点击在元素上的鼠标指针相对于屏幕的Y坐标；

MouseEvent.shiftKey 只读

Returns true if the 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).

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). The possible values are:

Constant name	Value	Desription
MouseEvent.MOZ_SOURCE_UNKNOWN	0	The input device is unknown.
MouseEvent.MOZ_SOURCE_MOUSE	1	The event was generated by a mouse (or mouse-like device).
MouseEvent.MOZ_SOURCE_PEN	2	The event was generated by a pen on a tablet.
MouseEvent.MOZ_SOURCE_ERASER	3	The event was generated by an eraser on a tablet.
MouseEvent.MOZ_SOURCE_CURSOR	4	The event was generated by a cursor.
MouseEvent.MOZ_SOURCE_TOUCH	5	The event was generated on a touch interface.
MouseEvent.MOZ_SOURCE_KEYBOARD	6	The event was generated by a keyboard.

Methods

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() for details.

MouseEvent.initMouseEvent()

Initializes the value of a MouseEvent created. If the event has already being dispatched, this method does nothing.

Example

This example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using DOM methods. 

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>

Click on the button to see how the sample works:

Specifications

Browser compatibility

See also

• Its direct parent, UIEvent.