鼠标事件

这篇翻译不完整。请帮忙从英语翻译这篇文章

MouseEvent 接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括:clickdblclickmouseupmousedown

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

一些具体的事件都派生自 MouseEventWheelEvent 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

Specification Status Comment
WHATWG HTML Living Standard
MouseEvent.region
Living Standard From Document Object Model (DOM) Level 3 Events Specification, added the region property.
Pointer Lock
MouseEvent
Candidate Recommendation From Document Object Model (DOM) Level 3 Events Specification, added movementX and movementY properties.
Document Object Model (DOM) Level 3 Events Specification
MouseEvent
Working Draft From Document Object Model (DOM) Level 2 Events Specification, added the MouseEvent() constructor, the getModifierState() method and the buttons property.
Document Object Model (DOM) Level 2 Events Specification
MouseEvent
Recommendation Initial definition.

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
movementX
movementY
(Yes) moz (Yes) webkit ? ? ?
buttons (Yes) 未实现 ? ? ?
which 1.0 1.0 9.0 5.0 1.0
getModifierState() 15 (15) (Yes) (Yes) (Yes) (Yes)
mozPressure and mozInputSource 4.0 (2) 未实现 未实现 未实现 未实现
MouseEvent() 11 (11) (Yes) ? (Yes) ?
MouseEvent.region 32 (32) ? ? ? ?
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

See also

文档标签和贡献者

 此页面的贡献者: jimwmg, Dcfm, ziyunfei, qovciu
 最后编辑者: jimwmg,