From b39e63798f64709e6edacbaee18847b52b6736d3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 1 Jan 2022 01:24:04 +0900 Subject: 2021/11/16 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/mouseevent/screenx/index.md | 130 ++++++++++++++------------- 1 file changed, 66 insertions(+), 64 deletions(-) diff --git a/files/ja/web/api/mouseevent/screenx/index.md b/files/ja/web/api/mouseevent/screenx/index.md index 74d090a292..7c11d024d5 100644 --- a/files/ja/web/api/mouseevent/screenx/index.md +++ b/files/ja/web/api/mouseevent/screenx/index.md @@ -1,84 +1,86 @@ --- title: MouseEvent.screenX slug: Web/API/MouseEvent/screenX +tags: + - API + - CSSOM View + - DOM イベント + - MouseEvent + - プロパティ + - 読み取り専用 + - リファレンス +browser-compat: api.MouseEvent.screenX translation_of: Web/API/MouseEvent/screenX --- -

{{APIRef("DOM Events")}}

+{{APIRef("DOM Events")}} -

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

+**`screenX`** は {{domxref("MouseEvent")}} インターフェイスの読み取り専用プロパティで、グローバル（スクリーン）座標における、マウスポインターの水平方向の座標（オフセット）を示します。 -

記法

+> **Note:** マルチスクリーン環境では、水平方向に並べられた画面が単一の機器として扱われ、 `screenX` の範囲に画面の幅が加算されることがあります。 -
var pixelNumber = instanceOfMouseEvent.screenX
-
+## 構文 -

返り値

+```js +var x = instanceOfMouseEvent.screenX +``` - +### 返値 -

使用例

+`double` の浮動小数点値です。 -
<html>
-<head>
-<title>screenX\screenY example</title>
+これを定義する早期の版の仕様書では、ピクセル数を表す整数として定義していました。
 
-<script type="text/javascript">
+## 例
 
-function showCoords(evt){
-  alert(
-    "screenX value: " + evt.screenX + "\n"
-    + "screenY value: " + evt.screenY + "\n"
-  );
+この例では、 {{domxref("Element/mousemove_event", "mousemove")}} イベントが発行されるたびにマウスの座標を表示します。
+
+#### HTML
+
+```html
+
マウスを動かして、位置を確認してください。

+

+```
+
+#### JavaScript
+
+```js
+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}`;
 }
+```
+
+#### 結果
+
+{{EmbedLiveSample("Example")}}
 
-</script>
-</head>
+### イベントのルーティング
 
-<body onmousedown="showCoords(event)">
-<p>To display the mouse coordinates click anywhere on the page.</p>
-</body>
-</html>
-
-

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

+ウィンドウや文書、範囲の要素にイベントをトラップすると、次の例のように、そのイベント（クリックなど）の座標を取得して、適切にルーティングすることができます。 -
function checkClickMap(e) {
-  if (e.screenX < 50) doRedButton();
-  if (50 <= e.screenX && e.screenX < 100) doYellowButton();
-  if (e.screenX >= 100) doRedButton();
+```js
+function checkClickMap(e) {
+  if (e.screenX < 50) doRedButton();
+  if (50 <= e.screenX && e.screenX < 100) doYellowButton();
+  if (e.screenX >= 100) doRedButton();
 }
-
- -

仕様

- - - - - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('DOM3 Events','#widl-MouseEvent-screenX','MouseEvent.screenX')}}{{Spec2('DOM3 Events')}} {{SpecName('DOM2 Events')}} からの変更なし
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.sceenX')}}{{Spec2('DOM2 Events')}}最初の定義
- -

ブラウザ互換性

- -

{{Compat("api.MouseEvent.screenX")}}

- -

関連情報

- - +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{ domxref("MouseEvent") }} +- {{ domxref("MouseEvent.screenY","screenY") }} +- {{ domxref("MouseEvent.clientX","clientX") }} / {{ domxref("MouseEvent.clientY", "clientY") }} -- cgit v1.2.3-54-g00ecf