MouseEvent

MouseEvent 介面表示了由使用者經指標裝置（如滑鼠）進行互動所發生的事件。常見的 MouseEvent 實作事件包括了 click、dblclick、mouseup 與 mousedown。

MouseEvent 繼承自 UIEvent，而 UIEvent 則繼承自 Event。雖然 MouseEvent.initMouseEvent() 方法仍然向下相容新的瀏覽器，但現今應該使用 MouseEvent() 建構式來建立 MouseEvent 物件。

另外還有一些特定的事件繼承自 MouseEvent：WheelEvent 及 DragEvent。

MouseEvent()

建立一個 MouseEvent 物件。

此介面也繼承了其父介面 UIEvent 與 Event 的屬性

MouseEvent.altKey Read only

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

MouseEvent.button Read only

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

MouseEvent.buttons Read only

The buttons being pressed when the mouse event was fired

MouseEvent.clientX Read only

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

MouseEvent.clientY Read only

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

MouseEvent.ctrlKey Read only

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

MouseEvent.metaKey Read only

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

MouseEvent.movementX Read only

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

MouseEvent.movementY Read only

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

MouseEvent.offsetX Read only

The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.

MouseEvent.offsetY Read only

The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.

MouseEvent.pageX Read only

The X coordinate of the mouse pointer relative to the whole document.

MouseEvent.pageY Read only

The Y coordinate of the mouse pointer relative to the whole document.

MouseEvent.region Read only

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

MouseEvent.relatedTarget Read only

The secondary target for the event, if there is one.

MouseEvent.screenX Read only

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

MouseEvent.screenY Read only

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

MouseEvent.shiftKey Read only

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

MouseEvent.which Read only

The button being pressed when the mouse event was fired.

MouseEvent.mozPressure Read only

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 Read only

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

MouseEvent.webkitForce Read only

The amount of pressure applied when clicking

MouseEvent.x Read only

Alias for MouseEvent.clientX.

MouseEvent.y Read only

Alias for MouseEvent.clientY

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN Read only

Minimum force necessary for a normal click

MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN Read only

Minimum force necessary for a force click

此介面也繼承了其父介面 UIEvent 與 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.

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:

[1] Requires enabling the ExperimentalCanvasFeatures flag.

• Its direct parent, UIEvent.