MouseEvent: screenX プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
screenX
は MouseEvent
インターフェイスの読み取り専用プロパティで、グローバル(スクリーン)座標における、マウスポインターの水平方向の座標(オフセット)を示します。
メモ:
マルチスクリーン環境では、水平方向に並べられた画面が単一の機器として扱われ、 screenX
の範囲に画面の幅が加算されることがあります。
値
double
の浮動小数点値です。
これを定義する早期の版の仕様書では、ピクセル数を表す整数として定義していました。
例
この例では、 mousemove
イベントが発行されるたびにマウスの座標を表示します。
HTML
html
<p>マウスを動かして、位置を確認してください。</p>
<p id="screen-log"></p>
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}`;
}
結果
イベントのルーティング
ウィンドウや文書、範囲の要素にイベントをトラップすると、次の例のように、そのイベント(クリックなど)の座標を取得して、適切にルーティングすることができます。
js
function checkClickMap(e) {
if (e.screenX < 50) doRedButton();
if (50 <= e.screenX && e.screenX < 100) doYellowButton();
if (e.screenX >= 100) doRedButton();
}
仕様書
Specification |
---|
UI Events # dom-mouseevent-screenx |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
screenX |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.