JavaScript でカーソル位置を取得する
-
selectionStartおよびselectionEndプロパティを使用してカーソル位置を取得する -
screenX/Yプロパティを使用してカーソル位置を取得する -
clientX/Yを使用してカーソル位置を取得する -
pageX/Yプロパティを使用してカーソル位置の値を取得する
JavaScript には基本的な位置プロパティ selectionStart と selectionEnd が組み込まれており、文字列リテラルの 0th インデックスからのみ位置値を取得できます。 その他のプロパティも、座標マークに基づいて位置の値を抽出する際に重要な役割を果たします。
この場合、基準点は変化する可能性があるため、異なるフレームごとに異なる値になります。 次のセクションでは、selectionStart および selectionEnd プロパティの例を示します。
screenX/Y、clientX/Y、pageX/Y の動作原理についても検討します。ここで、3つのプロパティは座標系に基づいています。 でも、まずは本編に飛び込みましょう！
selectionStart および selectionEnd プロパティを使用してカーソル位置を取得する
selectionStart および selectionEnd プロパティは読み取り/書き込みプロパティです。 位置値で定義するか、読み取り操作を実行するデフォルト値を使用できます。
selectionStart と selectionEnd の値を明示的に取り、部分文字列の特定の範囲を計算する getSelectionRange プロパティもあります。 文字列は特定の属性でのみ機能するため、文字列の操作は制限されています。
たとえば、input:text、input:textarea、input:password などです。この特定の ドキュメント で、より詳細な側面を持つことができます。 ここで示したインスタンスでは、selectionStart の読み取り専用メソッドのみを紹介します。
読み取り専用規則について話すとき、selectionStart と selectionEnd は同様に機能します。 カーソルが通過した文字列の位置を出力します。
正確には、カーソルは、これらのプロパティが機能する text タイプのカーソルです。 そのため、水平部分の位置のみを取得し、計算は文字数に依存します。 それでは、どのように機能するかを確認しましょう。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Get Cursor</title>
</head>
<body>
<input id="Javascript_example" name="one" type="text" value="Javascript example" onmousemove="textbox()">
<p id="vals"></p>
<script>
function textbox(){
var ctl = document.getElementById('Javascript_example');
var startPos = ctl.selectionStart;
document.getElementById('vals').innerText = startPos;
}
</script>
</body>
</html>
出力：
selectionEnd はここでも同様に機能するため、プレビューは追加しませんでした。 selectionStart プロパティと同じ結果を試すことができます。 これらのプロパティの読み取り専用セクションです。
screenX/Y プロパティを使用してカーソル位置を取得する
screenX/Y プロパティの場合、基準点によって参照される位置を計算します。 座標値は、位置を示すために特定の基準点に厳密に従います。
ここで、カーソル位置は default カーソル用です。 したがって、onmousemove 属性を使用して位置を追跡します。 screenX/Y は読み取り専用のプロパティであり、グローバルまたはスクリーン全体の座標として基準点に従います。 以下の例を確認してみましょう。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<title>Get Cursor</title>
</head>
<body>
<p>Move your mouse to see its position.</p>
<p id="screen-log" style="height:900px;width:600px; text-align:center"></p>
</body>
<script>
let screenLog = document.querySelector('#screen-log');
document.addEventListener('mousemove', logKey);
function logKey(e) {
screenLog.innerText = `
Screen X/Y: ${e.screenX}, ${e.screenY}`;
}
</script>
</html>
出力：
ご覧のとおり、座標値はカーソルの移動位置で更新されます。 また、あるセクションでは、スクロールがカーソルの位置に影響を与えないことに気付くでしょう。
これは、ページが上下または左右にスクロールされるたびに、ページ全体が固定され、画面サイズを考慮してフレームのそのインスタンスの位置を計算することを意味します。
clientX/Y を使用してカーソル位置を取得する
clientX/Y も参照ポイントをビューポートとする読み取り専用プロパティです。 この点に関して、上下にスクロールされたビューポートは固定され、座標値が測定されます。
より明確に言えば、ページのトップ セクションにいる場合、y の値は 0 になります。 そしておそらく、下にスクロールして 20 ピクセルになり、y 値を取得しようとすると、まだ 0 として表示されます。
これは、ビューポートを占有している部分が何であれ、それのみが考慮されることを意味します。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<title>Get Cursor</title>
</head>
<body>
<p>Move your mouse to see its position.</p>
<p id="screen-log" style="height:900px;width:600px; text-align:center"></p>
</body>
<script>
let screenLog = document.querySelector('#screen-log');
document.addEventListener('mousemove', logKey);
function logKey(e) {
screenLog.innerText = `
Client X/Y: ${e.clientX}, ${e.clientY}`;
}
</script>
</html>
出力：
というわけで、ページの先頭のvalue(y)を確認した部分では、0という結果になりました。 そして少し下にスクロールすると、値は0のままでした。 したがって、x 軸の値についても同様のタスクを実行できます。
pageX/Y プロパティを使用してカーソル位置の値を取得する
screenX/Y や clientX/Y と同様に、pageX/Y も読み取り専用のプロパティです。 ただし、これらのプロパティとは異なり、pageX/Y は値を計算する際にページ全体のサイズを考慮します。
これは、ビューポートの長さがスクリーンに表示されるビューポートよりも長い場合、プロパティはページ全体のサイズ全体としてカウントされることを意味します。 したがって、このプロパティを使用して、重要なセクションまたはカーソル位置をより直感的に取得できます。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<title>Get Cursor</title>
</head>
<body>
<p>Move your mouse to see its position.</p>
<p id="screen-log" style="height:900px;width:600px; text-align:center"></p>
</body>
<script>
let screenLog = document.querySelector('#screen-log');
document.addEventListener('mousemove', logKey);
function logKey(e) {
screenLog.innerText = `Page X/Y: ${e.pageX}, ${e.pageY}`;
}
</script>
</html>
出力：
視覚化できるように、スクロールバーをスクロールしていないとき、y 軸の上部位置の値は 0 でした。
少し下にスクロールすると、一番上にスクロールダウンしたピクセル数である 58 の y 値が表示されました。 では、仕事の目的に応じてどちらの物件が適しているか比較検討してみましょう。
