1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
---
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"><p><label><input type="checkbox" id="checkbox"> Checked</label>
<p><button id="button">Click me</button></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>
|
