files/ja/web/api/mouseevent/screenx/index.html


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

---
title: MouseEvent.screenX
slug: Web/API/MouseEvent/screenX
translation_of: Web/API/MouseEvent/screenX
---
<p>{{APIRef("DOM Events")}}</p>

<p><strong><code>MouseEvent.screenX</code></strong> は、イベントの発生した位置の、スクリーン内での X 座標を参照できる読み取り専用の属性です。</p>

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

<pre class="syntaxbox">var <em>pixelNumber</em> = <em>instanceOfMouseEvent</em>.screenX
</pre>

<h3 id="返り値">返り値</h3>

<ul>
 <li><em><code>pixelNumber</code></em> はスクリーンの左上の点からのピクセル数です。</li>
</ul>

<h3 id="Example" name="Example">使用例</h3>

<pre class="brush: html">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;screenX\screenY example&lt;/title&gt;

&lt;script type="text/javascript"&gt;

function showCoords(evt){
  alert(
    "screenX value: " + evt.screenX + "\n"
    + "screenY value: " + evt.screenY + "\n"
  );
}

&lt;/script&gt;
&lt;/head&gt;

&lt;body onmousedown="showCoords(event)"&gt;
&lt;p&gt;To display the mouse coordinates click anywhere on the page.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>window や document のような領域の広い要素に対してイベントを処理する場合、以下のように座標を元に適切な処理を呼び出すことができます。</p>

<pre class="brush: js">function checkClickMap(e) {
  if (e.screenX &lt; 50) doRedButton();
  if (50 &lt;= e.screenX<span style="font-size: 1rem;"> &amp;&amp; </span>e.screenX<span style="font-size: 1rem;"> &lt; 100)</span><span style="font-size: 1rem;"> doYellowButton();
</span>  if (e.screenX &gt;= 100) doRedButton();
}
</pre>

<h2 id="仕様">仕様</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様</th>
   <th scope="col">状態</th>
   <th scope="col">コメント</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-screenX','MouseEvent.screenX')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td> {{SpecName('DOM2 Events')}} からの変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.sceenX')}}</td>
   <td>{{Spec2('DOM2 Events')}}</td>
   <td>最初の定義</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>機能</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>基本サポート</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>機能</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>基本サポート</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>
</ul>