WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： とみー
カテゴリー： マークアップ >CSS

レスポンシブデザインの案件で、電話番号を追加することがあると思います。
電話番号のリンクをスマートフォンのみ有効にして、パソコンでは無効にしたい…。
そんなときはcssの「pointer-events」プロパティを使用すれば簡単にできてしまいます。

pointer-eventsとは

要素をクリックして反応する範囲を定義するプロパティになります。
クリック対象に使える値は【auto】か【none】の2つです。

auto
要素がpointer-eventsプロパティが指定されていないときと同じ状態です。
none
要素のクリックイベントが無効になります。
　　しかし、子孫要素が pointer-events の別の値を設定している場合は、その子孫要素自体はポインターイベントの対象になります。

.btn {
  pointer-events: auto; // クリック可能
}
.btn.disabled{
  pointer-events: none; // クリック無効
}

クリックイベントとは「click」「hover」の事を指していて、テキストの選択は可能です。
テキストの選択を無効化したい場合は【user-select】という別のプロパティを使用します。

使用する例

あまり使用することがなさそうなプロパティですが、意外と使用することがありました。
その例を紹介します。

①PCだと部分的にクリックさせたいけど、SPは全体をクリックできるようにしたい時
②メニューの▼アイコン（疑似要素beforeとafter）にもクリックできるようにしたい時
③disabled状態（選択、クリック、入力などができない）にhover時のスタイル打ち消しをしなくても、hoverしなくなる

selectの装飾に使用する例

select要素に装飾をしたい時、select要素には疑似要素（beforeとafter）を付ける事ができません。
そのため、selectをlabelやdivで囲ってそこに擬似要素を付けて装飾をします。

しかし、このままではアイコン部分をクリックしてもselectは反応しません。
そこで、pointer-eventsを使います。
label:beforeにpointer-events: none;を指定すると、label:beforeのクリックイベントが無効化されて後ろにあるselectがクリックされます。

まとめ

よく使用することはありませんが、突然必要になることがあることがあります。
その時のためにもpointer-eventsプロパティについて覚えておきましょう。