フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

pointer-eventsの本当の意味

pointer-events: none を扱った記事も、リンクを無効にするとか、クリックを無効にするとか書かれていて、pointer-eventsについての説明として間違いとまでは言えないですが、正確ではないので、できるだけ正確な解説をします。

まずMDNの解説

特定のグラフィック要素がマウスイベントの対象になる可能性のある環境 (存在する場合) を設定します。

いまいちよくわかりませんね。
自分なりに説明すれば

その要素のマウスやタッチで反応する範囲を定義するプロパティ

ってところです。

参考用のデモ

htmlより細かい指定のできるsvgを例にすると直感的でわかりやすいです。
pointer-events: fill を指定すると、塗られた部分のみポインターに反応します。

つまり pointer-events: none はポインターに反応する範囲は一切無し、見えてはいるけどポインターに対しては存在しないかのようにふるまいます。
そのためポインターによるホバーやクリックには反応しませんが、キーボードのタブによるフォーカスとエンターによるクリックはできます。
ポインターでクリックしても、ないものとされるので配下がクリックされることになります。

イベントまわりを理解してたら、一見、内部的にはpreventDefault,stopPropagationしてイベントを無効してるようにも見えますが、そもそもイベントの発火自体していません。

[紹介元] CSSタグが付けられた新着記事 – Qiita pointer-eventsの本当の意味

コメント

記事に戻る

コメントを残す