MouseEvent

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

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

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

建構式

MouseEvent() (en-US): 建立一個 MouseEvent 物件。

屬性

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

MouseEvent.altKey (en-US) Read only: Returns true if the alt key was down when the mouse event was fired.
MouseEvent.button (en-US) Read only: The button number that was pressed when the mouse event was fired.
MouseEvent.buttons (en-US) Read only: The buttons being pressed when the mouse event was fired
MouseEvent.clientX (en-US) Read only: The X coordinate of the mouse pointer in local (DOM content) coordinates.
MouseEvent.clientY (en-US) Read only: The Y coordinate of the mouse pointer in local (DOM content) coordinates.
MouseEvent.ctrlKey (en-US) Read only: Returns true if the control key was down when the mouse event was fired.
MouseEvent.metaKey (en-US) Read only: Returns true if the meta key was down when the mouse event was fired.
MouseEvent.movementX (en-US) Read only: The X coordinate of the mouse pointer relative to the position of the last mousemove (en-US) event.
MouseEvent.movementY (en-US) Read only: The Y coordinate of the mouse pointer relative to the position of the last mousemove (en-US) event.
MouseEvent.offsetX (en-US) Read only 實驗性質: The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
MouseEvent.offsetY (en-US) Read only 實驗性質: The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.
MouseEvent.pageX (en-US) Read only 實驗性質: The X coordinate of the mouse pointer relative to the whole document.
MouseEvent.pageY (en-US) Read only 實驗性質: The Y coordinate of the mouse pointer relative to the whole document.
MouseEvent.region (en-US) Read only: Returns the id of the hit region affected by the event. If no hit region is affected, null is returned.
MouseEvent.relatedTarget (en-US) Read only: The secondary target for the event, if there is one.
MouseEvent.screenX (en-US) Read only: The X coordinate of the mouse pointer in global (screen) coordinates.
MouseEvent.screenY (en-US) Read only: The Y coordinate of the mouse pointer in global (screen) coordinates.
MouseEvent.shiftKey (en-US) Read only: Returns true if the shift key was down when the mouse event was fired.
MouseEvent.which (en-US) 非標準 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 (en-US) 非標準 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 (en-US) 非標準 Read only: The amount of pressure applied when clicking
MouseEvent.x (en-US) 實驗性質 Read only: Alias for MouseEvent.clientX (en-US).
MouseEvent.y (en-US) 實驗性質 Read only: Alias for MouseEvent.clientY (en-US)

Constants

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN (en-US) 非標準 Read only: Minimum force necessary for a normal click
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN (en-US) 非標準 Read only: Minimum force necessary for a force click

方法

此介面也繼承了其父介面 UIEvent 與 Event 的方法

MouseEvent.getModifierState() (en-US): Returns the current state of the specified modifier key. See the KeyboardEvent.getModifierState (en-US)() for details.
MouseEvent.initMouseEvent() (en-US) 已棄用: 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>
<p><button id="button">Click me</button></p>

Click on the button to see how the sample works:

規範

Specification
UI Events # interface-mouseevent
CSSOM View Module # extensions-to-the-mouseevent-interface
Pointer Lock 2.0 # extensions-to-the-mouseevent-interface

瀏覽器相容性

BCD tables only load in the browser

參見

Its direct parent, UIEvent.