【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
  })
})

end