鼠标事件

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

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

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

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/zh-CN/docs/Web/API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25  86,20  86,30  76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/zh-CN/docs/Web/API/UIEvent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="153.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">UIEvent</text></a><polyline points="191,25  201,20  201,30  191,25" stroke="#D4DDE4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="281" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">MouseEvent</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

构造函数

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.mozPressure 只读

点击事件发生时施加在触摸屏或者平板设备的压力量。这个数值在0.0（最小压力）和1.0（最大压力）之间。

MouseEvent.mozInputSource 只读

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

MouseEvent.webkitForce 只读

点击时施加的压力量。

MouseEvent.x 只读

MouseEvent.clientX的别名。

MouseEvent.y 只读

 MouseEvent.clientY的别名。

常量

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN 只读

正常点击所需的最小力量

MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN 只读

强制点击所需的最小力量

方法

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

MouseEvent.getModifierState()

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

MouseEvent.initMouseEvent()

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

示例

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

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>

点击按钮查看演示：

规范

浏览器兼容性

参考

• 它的直接父级，UIEvent.