オーバーレイHTML要素のマウスクリックを下層要素へ透過させる方法

オーバーレイ要素のクリックを透過させる必要性

Web開発では、装飾やガイド表示のために他の要素の上に重ねたオーバーレイ要素が、下にあるボタンやリンクのクリックを妨げてしまうことがあります。このような場合、クリックイベントを下層の要素へ渡すことで問題を解決できます。

クリックイベントでマウス座標を取得する

まず、clickイベントのハンドラ内でマウスの座標（clientX・clientY）を取得します。

次に、一時的にオーバーレイを非表示状態にしてから、以下のメソッドを使って指定座標上にある要素を取得します。要素の取得が完了したら、忘れずにオーバーレイを再表示しましょう。

document.elementFromPoint(x, y)

このメソッドは、指定した座標に位置する最前面の要素を返します。オーバーレイを一時的に隠すことで、その下に隠れている本来の対象要素を正しく取得できる仕組みです。

CSSのpointer-eventsプロパティを使う方法

JavaScriptを使わずに解決したい場合は、CSSのpointer-eventsプロパティが便利です。以下のように設定すると、該当するdiv要素がマウスイベントを受け付けなくなり、クリックがそのまま下層の要素へ透過します。

div {
    pointer-events:none;
}

pointer-events: none; が指定された要素は、マウスカーソルの判定対象から外れるため、背後にあるリンクやボタンなどをそのまま操作できるようになります。ただし、オーバーレイ自体に対するクリック処理も無効になる点には注意が必要です。用途に応じて、JavaScriptによる動的な制御とCSSによる静的な設定を使い分けるとよいでしょう。