---
title: 鼠标事件
slug: Web/API/MouseEvent
translation_of: Web/API/MouseEvent
---
<p id="Summary">{{APIRef("DOM Events")}}</p>

<p><strong><code>MouseEvent</code> </strong>接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：{{event("click")}}，{{event("dblclick")}}，{{event("mouseup")}}，{{event("mousedown")}}。</p>

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

<p>一些具体的事件都派生自 <code>MouseEvent</code>：{{domxref("WheelEvent")}} 和{{domxref("DragEvent")}}。</p>

<p>{{InheritanceDiagram}}</p>

<h2 id="构造函数">构造函数</h2>

<dl>
 <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt>
 <dd>生成一个新的MouseEvent对象</dd>
</dl>

<h2 id="属性">属性</h2>

<p><em>这个接口也继承了{{domxref("UIEvent")}} 和 {{domxref("Event")}}原型上的方法,</em></p>

<dl>
 <dt>{{domxref("MouseEvent.altKey")}} {{readonlyinline}}</dt>
 <dd>当鼠标事件触发的时，如果<kbd>alt</kbd> 键被按下，返回true;</dd>
 <dt>{{domxref("MouseEvent.button")}} {{readonlyinline}}</dt>
 <dd>当鼠标事件触发的时，如果鼠标按钮被按下（如果有的话），将会返回一个数值。</dd>
 <dt>{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt>
 <dd>
 <p>当鼠标事件触发的时，如果多个鼠标按钮被按下（如果有的话），将会返回一个或者多个代表鼠标按钮的数字。</p>
 </dd>
 <dt>{{domxref("MouseEvent.clientX")}} {{readonlyinline}}</dt>
 <dd>鼠标指针在点击元素（DOM）中的X坐标。</dd>
 <dt>{{domxref("MouseEvent.clientY")}} {{readonlyinline}}</dt>
 <dd>鼠标指针在点击元素（DOM）中的Y坐标。</dd>
 <dt>{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}</dt>
 <dd>当鼠标事件触发时，如果 <kbd>control</kbd> 键被按下，则返回 true；</dd>
 <dt>{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}</dt>
 <dd>当鼠标事件触发时，如果 <kbd>meta</kbd>键被按下，则返回 true；</dd>
 <dt>{{domxref("MouseEvent.movementX")}} {{readonlyinline}}</dt>
 <dd>鼠标指针相对于最后{{event("mousemove")}}事件位置的X坐标。</dd>
 <dt>{{domxref("MouseEvent.movementY")}} {{readonlyinline}}</dt>
 <dd>鼠标指针相对于最后{{event("mousemove")}}事件位置的Y坐标。</dd>
</dl>

<dl>
 <dt>{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}</dt>
 <dd>鼠标指针相对于目标节点内边位置的X坐标</dd>
 <dt>{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}</dt>
 <dd>鼠标指针相对于目标节点内边位置的Y坐标</dd>
 <dt>{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}</dt>
 <dd>鼠标指针相对于整个文档的X坐标；</dd>
 <dt>{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}</dt>
 <dd>鼠标指针相对于整个文档的Y坐标；</dd>
</dl>

<dl>
 <dt>{{domxref("MouseEvent.region")}} {{readonlyinline}}</dt>
 <dd>返回被点击事件影响的点击区域的id，如果没有区域被影响则返回null。</dd>
 <dt>{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}</dt>
 <dd>
 <p>鼠标事件的次要目标（如果有的话）</p>
 </dd>
 <dt>{{domxref("MouseEvent.screenX")}} {{readonlyinline}}</dt>
 <dd>鼠标指针相对于全局（屏幕）的X坐标；</dd>
 <dt>{{domxref("MouseEvent.screenY")}} {{readonlyinline}}</dt>
 <dd>鼠标指针相对于全局（屏幕）的Y坐标；</dd>
 <dt>{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}</dt>
 <dd>当鼠标事件触发时，如果 <kbd>shift</kbd> 键被按下，则返回 true；</dd>
 <dt>{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}</dt>
 <dd>当鼠标事件触发时，表示被按下的按钮。</dd>
 <dt>{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
 <dd>点击事件发生时施加在触摸屏或者平板设备的压力量。这个数值在0.0（最小压力）和1.0（最大压力）之间。</dd>
 <dt>{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
 <dd>生成事件的类型（若干 <code>MOZ_SOURCE_* </code>常量如下列出）。可通过该属性获知鼠标事件是否由真实鼠标设备触发，亦或通过触摸事件触发（这可能影响处理坐标事件时的精确程度）。</dd>
 <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
 <dd>点击时施加的压力量。</dd>
 <dt>{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}</dt>
 <dd>{{domxref("MouseEvent.clientX")}}的别名。</dd>
 <dt>{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}</dt>
 <dd> {{domxref("MouseEvent.clientY")}}的别名。</dd>
</dl>

<h2 id="常量">常量</h2>

<dl>
 <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
 <dd>正常点击所需的最小力量</dd>
 <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
 <dd>强制点击所需的最小力量</dd>
</dl>

<h2 id="方法">方法</h2>

<p><em>这个接口也继承了它的副方法{{domxref("UIEvent")}} 和{{domxref("Event")}}.</em></p>

<dl>
 <dt>{{domxref("MouseEvent.getModifierState()")}}</dt>
 <dd>返回指定修饰键的当前状态。请参照{{domxref("KeyboardEvent.getModifierState")}}() 查看详情。</dd>
 <dt>{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}</dt>
 <dd>初始化创建MouseEvent的值。如果这个事件已经被分派，这个方法将不会做任何事情。</dd>
</dl>

<h2 id="示例">示例</h2>

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

<pre class="brush: js">function simulateClick() {
  var evt = new <a href="/en-US/docs/Web/API/MouseEvent">MouseEvent</a>("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  });
  var cb = document.getElementById("checkbox"); //element to click on
  var canceled = !cb.<a href="/en-US/docs/Web/API/EventTarget.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(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);</pre>

<pre class="brush: html">&lt;p&gt;&lt;label&gt;&lt;input type="checkbox" id="checkbox"&gt; Checked&lt;/label&gt;
&lt;p&gt;&lt;button id="button"&gt;Click me&lt;/button&gt;</pre>

<p>点击按钮查看演示：</p>

<p>{{ EmbedLiveSample('示例', '', '', '') }}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
   <td>{{Spec2('CSSOM View')}}</td>
   <td>Redefines <code>MouseEvent</code> from long to double. This means that a <code>PointerEvent</code> whose <code>pointerType</code> is mouse will be a double.</td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td>
   <td>{{Spec2('Pointer Lock')}}</td>
   <td>From {{SpecName('DOM3 Events')}}, added <code>movementX</code> and <code>movementY</code> properties.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
   <td>{{Spec2('CSSOM View')}}</td>
   <td>From {{SpecName('DOM3 Events')}}, added <code>offsetX</code> and <code>offsetY</code>, <code>pageX</code> and <code>pageY</code>, <code>x,</code> and <code>y</code> properties. Redefined screen, page, client and coordinate (x and y) properties as <code>double</code> from <code>long</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td>From {{SpecName('DOM2 Events')}}, added the <code>MouseEvent()</code> constructor, the <code>getModifierState()</code> method and the <code>buttons</code> property.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td>
   <td>{{Spec2('DOM2 Events')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>

<p>{{Compat("api.MouseEvent")}}</p>

<h2 id="参考">参考</h2>

<ul>
 <li>它的直接父级，{{domxref("UIEvent")}}.</li>
</ul>