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

shima

2020/02/27

pointer-eventsでクリックイベントを無効化する方法

投稿者: shima
カテゴリー: マークアップ >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プロパティについて覚えておきましょう。

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ