diff options
Diffstat (limited to 'files/zh-cn/web/api/mouseevent/initmouseevent/index.html')
-rw-r--r-- | files/zh-cn/web/api/mouseevent/initmouseevent/index.html | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/mouseevent/initmouseevent/index.html b/files/zh-cn/web/api/mouseevent/initmouseevent/index.html new file mode 100644 index 0000000000..ffb87f8953 --- /dev/null +++ b/files/zh-cn/web/api/mouseevent/initmouseevent/index.html @@ -0,0 +1,171 @@ +--- +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> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{domxref("MouseEvent.MouseEvent()","MouseEvent()")}}构造器,更标准的创建{{domxref("MouseEvent")}}对象方法。</li> + <li>{{domxref("Event.initEvent()")}}可以简单达到相同目的的方法。它已过时不再使用。</li> +</ul> |