鼠标事件
====

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

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

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

Event

UIEvent

MouseEvent构造函数
----

`MouseEvent()`

生成一个新的 MouseEvent 对象

属性
--

*这个接口也继承了`UIEvent` 和 `Event`原型上的方法，*

`MouseEvent.altKey` 只读 

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

`MouseEvent.button` 只读 

当鼠标事件触发的时，如果鼠标按钮被按下（如果有的话），将会返回一个数值。

`MouseEvent.buttons` 只读 

当鼠标事件触发的时，如果多个鼠标按钮被按下（如果有的话），将会返回一个或者多个代表鼠标按钮的数字。

`MouseEvent.clientX` 只读 

鼠标指针在点击元素（DOM）中的 X 坐标。

`MouseEvent.clientY` 只读 

鼠标指针在点击元素（DOM）中的 Y 坐标。

`MouseEvent.ctrlKey` 只读 

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

`MouseEvent.metaKey` 只读 

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

`MouseEvent.movementX` 只读 

鼠标指针相对于最后`mousemove`事件位置的 X 坐标。

`MouseEvent.movementY` 只读 

鼠标指针相对于最后`mousemove`事件位置的 Y 坐标。

`MouseEvent.offsetX` 只读 
实验性

鼠标指针相对于目标节点内边位置的 X 坐标

`MouseEvent.offsetY` 只读 
实验性

鼠标指针相对于目标节点内边位置的 Y 坐标

`MouseEvent.pageX` 只读 
实验性

鼠标指针相对于整个文档的 X 坐标；

`MouseEvent.pageY` 只读 
实验性

鼠标指针相对于整个文档的 Y 坐标；

`MouseEvent.region` 只读 

返回被点击事件影响的点击区域的 id，如果没有区域被影响则返回 null。

`MouseEvent.relatedTarget` 只读 

鼠标事件的次要目标（如果有的话）

`MouseEvent.screenX` 只读 

鼠标指针相对于全局（屏幕）的 X 坐标；

`MouseEvent.screenY` 只读 

鼠标指针相对于全局（屏幕）的 Y 坐标；

`MouseEvent.shiftKey` 只读 

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

`MouseEvent.which` 
非标准
 只读 

当鼠标事件触发时，表示被按下的按钮。

`MouseEvent.mozInputSource` 
非标准
 只读 

生成事件的类型（若干 `MOZ_SOURCE_*`常量如下列出）。可通过该属性获知鼠标事件是否由真实鼠标设备触发，亦或通过触摸事件触发（这可能影响处理坐标事件时的精确程度）。

`MouseEvent.webkitForce` (en-US) 
非标准
 只读 

点击时施加的压力量。

`MouseEvent.x` 
实验性
只读 

`MouseEvent.clientX`的别名。

`MouseEvent.y` 
实验性
只读 

`MouseEvent.clientY`的别名。

常量
--

`MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN` (en-US) 
非标准
只读 

正常点击所需的最小力量

`MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN` (en-US) 
非标准
只读 

强制点击所需的最小力量

方法
--

*这个接口也继承了它的副方法`UIEvent` 和`Event`.*

`MouseEvent.getModifierState()` (en-US)

返回指定修饰键的当前状态。请参照`KeyboardEvent.getModifierState` (en-US)() 查看详情。

`MouseEvent.initMouseEvent()` 
已弃用

初始化创建 MouseEvent 的值。如果这个事件已经被分派，这个方法将不会做任何事情。

示例
--

这个例子演示了使用 DOM 方法在复选框上模拟一个点击事件（使用编程的方式生成点击事件）。


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



```html
<p>
  <label><input type="checkbox" id="checkbox" /> Checked</label>
</p>
<p><button id="button">Click me</button></p>
```


点击按钮查看演示：

规范
--

| 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 with JavaScript enabled. Enable JavaScript to view data.

参考
--

* 它的直接父级，`UIEvent`.