pointer-eventsプロパティでクリックイベントを無効化にする｜気になるCSSプロパティ

今回はクリックイベント判定を操作するpointer-eventsプロパティについてじっくり見ていきます。

使い方

pointer-eventsプロパティは、基本的に値はautoかnoneのどちらかです。

auto（デフォルト）が通常通りの挙動になり、noneを指定するとクリックイベントが無効になります。
クリックイベントとは「クリック」「ホバー」の事を指していて、テキストの選択は可能です。

.btn {
  pointer-events: auto; // クリックイベント有効
}
.btn.disabled{
  pointer-events: none; // クリックイベント無効
}

ちなみに、テキストの選択を無効化したい場合はuser-selectという別のプロパティを使用します。

対応状況

CSS pointer-events (for HTML) – Can I use…

Can I useを見ると、対応状況はOpera Miniを除けば全て対応されています。IEも11以降は対応しているので、使ってもほぼほぼ問題ないでしょう。

使い所

「何に使うの？」と思う人もいるかもしれませんが、以下のような使い方が考えられます。

• PCだと一部クリックだが、SPだと全体をクリックできるようにしたい時
• <input>系（特に<select>）の装飾をする時に、装飾にもクリック判定が効く
• disabled状態にわざわざホバー時のスタイル打ち消しをしなくても、pointer-events一行書くだけでhoverしなくなる

普通のWebサイトというより、WebサービスやWebアプリの実装時に使うことが多そうです。

selectの装飾に使ってみる

例えばselect要素に装飾を当てたい時、select要素には疑似要素を付ける事ができません。
ですから、selectをlabelやdivで囲ってそこに擬似要素を付けて装飾をします。

しかし、そのままではアイコン部分をクリックしてもselectは反応しません。

そこで、pointer-eventsを使います。
label:beforeに対してpointer-events: none;を指定すると、label:beforeのクリックイベントが無効化されて後ろにあるselectがクリックされます。

決してよく使うわけではありませんが、このようにユーザーの使い勝手をよくする上で覚えていて損はないプロパティになります。