javascriptでマウスクリックした場所の要素を取得・選択する

使用する重要なクラス

・Selection

・Range

コード

document.body.onclick = (e) => {
  const x = e.pageX;
  const y = e.pageY;
  
  const elementUnderMouse = document.elementFromPoint(x, y);
  
  const range = document.createRange();
  range.selectNodeContents(elementUnderMouse);
  
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

解説

1. クリック時のマウス座標にある要素の取得

element.onclickイベントハンドラに関数を渡すことで、クリック時にその関数が実行されます。

渡した関数には引数を取ることができ、その中にマウス座標が格納されています。

・pageX: x座標

・pageY: y座標

まずはこの２つを取得します。

次に取得した座標をdocument.elementFromPoint()メソッドの第一、第二引数に渡します。

すると返り値で指定座標にある要素が返ってきます。

(注意: 要素のz-index属性で一番上に来るものが取得されます)

これでマウス座標の要素は取得できました。

次は選択です。

2. 要素の解除と選択

SelectionクラスとRangeクラスを使って要素を選択します。

簡単に言うと、Selectionは選択されている要素、Rangeは範囲を持つクラスです。

まずdocument.createRange()でRangeオブジェクトを作ります。

そしてselectNodeContents()に先程取得した要素を渡し、返り値（Rangeのオブジェクト）を保持しておきます。

次に現在選択されているものを解除します。しない場合はクリックのたびに選択範囲が増えていきます。

window.getSelection()で現在選択中の範囲を取得します。

その後、取得した選択範囲をremoveAllRanges()によって解除します。

最後にaddRange()にselectNodeContents()で取得したRangeオブジェクトを渡すと選択状態になります。

余談

onclickに渡す関数の引数に渡ってくるオブジェクトには、ctrlKeyなどの装飾キーが押されているかどうかがわかるメンバがありますので、それらを使用すれば、「ctrlKeyを押しながらクリックした場合は選択範囲を解除せずに増やしていく」という事もできますね。