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
|
---
title: MouseEvent.screenY
slug: Web/API/MouseEvent/screenY
tags:
- API
- 参考
- 属性
- 鼠标
- 鼠标事件
translation_of: Web/API/MouseEvent/screenY
---
<p>{{APIRef("DOM Events")}}</p>
<p> <strong><code>screenX</code></strong> 是 <a href="/zh-CN/docs/Web/API/MouseEvent"><code>MouseEvent</code></a> 的只读属性，提供鼠标在全局（屏幕）中的水平坐标（偏移量）。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox notranslate">var <em>pixelNumber</em> = <em>instanceOfMouseEvent</em>.screenY
</pre>
<h3 id="返回值">返回值</h3>
<p>一个<code>double</code>值。早期版本的规范定义将其一个整数值的像素数。有关详细信息，请参见浏览器兼容性部分。</p>
<h2 id="示例">示例</h2>
<p>这个例子展示了当触发 {{Event("mousemove")}} 事件时鼠标的坐标。</p>
<h3 id="HTML">HTML</h3>
<pre class="notranslate"><p>Move your mouse to see its position.</p>
<p id="screen-log"></p></pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="notranslate">let screenLog = document.querySelector('#screen-log');
document.addEventListener('mousemove', logKey);
function logKey(e) {
screenLog.innerText = `
Screen X/Y: ${e.screenX}, ${e.screenY}
Client X/Y: ${e.clientX}, ${e.clientY}`;
}</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample("Example")}}</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','#dom-mouseevent-screeny', 'screenY')}}</td>
<td>{{Spec2('CSSOM View')}}</td>
<td>Redefines {{domxref("MouseEvent")}} from long to double. </td>
</tr>
<tr>
<td>{{SpecName('DOM3 Events','#widl-MouseEvent-screenY','MouseEvent.screenY')}}</td>
<td>{{Spec2('DOM3 Events')}}</td>
<td>No change from {{SpecName('DOM2 Events')}}.</td>
</tr>
<tr>
<td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.sceenY')}}</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>Edge</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown()}}</td>
<td>{{CompatVersionUnknown()}}</td>
<td>6</td>
<td>{{CompatVersionUnknown()}}</td>
<td>{{CompatVersionUnknown()}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</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>{{CompatVersionUnknown()}}</td>
<td>{{CompatVersionUnknown()}}</td>
<td>{{CompatVersionUnknown()}}</td>
<td>{{CompatVersionUnknown()}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also" name="See_also">参见</h2>
<ul>
<li>{{ domxref("MouseEvent") }}</li>
<li>{{ domxref("MouseEvent.screenX","screenX") }}</li>
<li>{{ domxref("MouseEvent.clientX","clientX") }} / {{ domxref("MouseEvent.clientY", "clientY") }}</li>
</ul>
|
