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
|
---
title: MouseEvent.initMouseEvent()
slug: Web/API/MouseEvent/initMouseEvent
translation_of: Web/API/MouseEvent/initMouseEvent
---
<p>{{APIRef("DOM Events")}}{{deprecated_header}}</p>
<p><code><strong>MouseEvent.initMouseEvent()</strong></code> 方法用以在鼠标事件创建时(一般用 {{domxref("Document.createEvent()")}}方法创建)初始化其属性的值。</p>
<p>事件初始化是在事件被{{ domxref("Document.createEvent()") }}方法创建后必需的。这个方法必须在事件被{{ domxref("EventTarget.dispatchEvent()") }}方法发送出来前调用。一旦事件被发送后，它将不再起任何作用。 </p>
<div class="note">
<p><span style="font-size: 14px; line-height: 21px;"><strong>不要再用此方法，已过时。</strong></span></p>
<p>使用特定的事件构造器来替代它，像 {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}。<a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">创建并发送事件</a> 页面里有更多的使用信息。</p>
</div>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="syntaxbox"><em>event</em>.initMouseEvent(<em>type</em>, <em>canBubble</em>, <em>cancelable</em>, <em>view</em>,
<em> detail</em>, <em>screenX</em>, <em>screenY</em>, <em>clientX</em>, <em>clientY</em>,
<em> ctrlKey</em>, <em>altKey</em>, <em>shiftKey</em>, <em>metaKey</em>,
<em> button</em>, <em>relatedTarget</em>);</pre>
<h3 id="形参">形参</h3>
<dl>
<dt><em><code>type</code></em></dt>
<dd>设置事件类型{{domxref("Event.type", "type")}} 的字符串，包含以下几种鼠标事件：<code>click<font face="Open Sans, Arial, sans-serif">，</font></code><code>mousedown</code>，<code>mouseup</code>，<code>mouseover</code>，<code>mousemove</code>，<code>mouseout</code>。</dd>
<dt><em><code>canBubble</code></em></dt>
<dd>是否可以冒泡。取值集合见{{domxref("Event.bubbles")}}。</dd>
<dt><em><code>cancelable</code></em></dt>
<dd>是否可以阻止事件默认行为。取值集合见{{domxref("Event.cancelable")}}。</dd>
<dt><em><code>view</code></em></dt>
<dd>事件的AbstractView对象引用，这里其实指向{{domxref("window")}} 对象。取值集合见 {{domxref("UIEvent.view")}}。</dd>
<dt><em><code>detail</code></em></dt>
<dd>事件的鼠标点击数量。取值集合见{{domxref("Event.detail")}}。</dd>
<dt><em><code>screenX</code></em></dt>
<dd>事件的屏幕的x坐标。取值集合见{{domxref("MouseEvent.screenX")}}。</dd>
<dt><em><code>screenY</code></em></dt>
<dd>事件的屏幕的y坐标。取值集合见{{domxref("MouseEvent.screenY")}}。</dd>
<dt><em><code>clientX</code></em></dt>
<dd>事件的客户端x坐标。取值集合见{{domxref("MouseEvent.clientX")}}。</dd>
<dt><em><code>clientY</code></em></dt>
<dd>事件的客户端y坐标。取值集合见{{domxref("MouseEvent.clientY")}}。</dd>
<dt><em><code>ctrlKey</code></em></dt>
<dd>事件发生时 <kbd>control</kbd> 键是否被按下。取值集合见{{domxref("MouseEvent.ctrlKey")}}。</dd>
<dt><em><code>altKey</code></em></dt>
<dd>事件发生时 <kbd>alt</kbd> 键是否被按下。取值集合见{{domxref("MouseEvent.altKey")}}。</dd>
<dt><em><code>shiftKey</code></em></dt>
<dd>事件发生时 <kbd>shift</kbd> 键是否被按下。取值集合见{{domxref("MouseEvent.shiftKey")}}。</dd>
<dt><em><code>metaKey</code></em></dt>
<dd>事件发生时 <kbd>meta</kbd> 键是否被按下。取值集合见{{domxref("MouseEvent.metaKey")}}。</dd>
<dt><em><code>button</code></em></dt>
<dd>鼠标按键值 {{domxref("MouseEvent.button", "button")}}。</dd>
<dt><em><code>relatedTarget</code></em></dt>
<dd>事件的<a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">相关对象</a>。只在某些事件类型有用 (例如 <code>mouseover</code> ?和 <code>mouseout</code>)。其它的传null。</dd>
<dt>
<p> </p>
<h2 id="Example" name="Example">?示例</h2>
<h3 id="HTML内容">HTML内容</h3>
<pre class="brush: html"><code><div style="background:red;width:180px;padding:10px;">
<div id="out"></div>
<input type="text">
</div></code>
</pre>
<h3 id="JavaScript内容">JavaScript内容</h3>
<pre class="brush: js"><code>document.body.onclick = function(){
e = arguments[0];
var dt = e.target,stag = dt.tagName.toLowerCase();
</code>document.getElementById(<span class="highVAL">"out"</span>).innerHTML = <span class="highVAL">stag</span>;<code>
};
var simulateClick = function(){
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
document.body.dispatchEvent(evt);
}
simulateClick();//Why it can not show "input" ?</code>
</pre>
<p>这里有个在线演示</p>
<p>{{EmbedLiveSample('Example', 200, 36)}}</p>
<p>{{ LiveSampleLink('Example', 'Link to live demo') }}</p>
</dt>
</dl>
<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('DOM3 Events', '#idl-interface-MouseEvent-initializers', 'MouseEvent.initMouseEvent()')}}</td>
<td>{{Spec2('DOM3 Events')}}</td>
<td>From {{SpecName('DOM2 Events')}}, deprecated.</td>
</tr>
<tr>
<td>{{SpecName('DOM2 Events', '#Events-Event-initMouseEvent', 'MouseEvent.initMouseEvent()')}}</td>
<td>{{Spec2('DOM2 Events')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
{{Compat("api.MouseEvent.initMouseEvent")}}
<h2 id="参阅">参阅</h2>
<ul>
<li>{{domxref("MouseEvent.MouseEvent()","MouseEvent()")}}构造器，更标准的创建{{domxref("MouseEvent")}}对象方法。</li>
<li>{{domxref("Event.initEvent()")}}可以简单达到相同目的的方法。它已过时不再使用。</li>
</ul>
|
