🖋
【JavaScript】mousedown 時のカーソル位置を取得する
前提
ブラウザにおけるキャレットや範囲選択時のカーソル位置を取得する方法として selection [↗] (対応状況 [↗]) があります。
キャレットの表示位置は mousedown イベント [↗] の時点で変化しますが selection [↗] の更新タイミングは mousedown イベント [↗] より少し遅いようです。
方法
selectionchange イベント [↗] で selection [↗] の更新を検知できます。
対象要素.addEventListener('mousedown', (event) => {
// 左クリックのみ
if (event.button !== 0) {
return
}
document.addEventListener('selectionchange', () => {
console.log(getSelection())
}, {
// 1 回呼び出されたら削除する
once: true
})
})
Discussion