こんにちは、フロントエンドエンジニアのザワです。
知っている人は知っているが、知らない人には耳障りな、いや、耳寄りな情報。そんな生活にちょっとの潤いをもたらすことを目的に始めたこのシリーズ、CSSの妙。
2回目の今回はpointer-events編です。最近では1サイト作るときには必ずといっていいほど、登場します。対応していないブラウザはほぼないので、使いたいときに使いたい放題です。
でも、pointer-eventsってなにものなの？ お得なの？ という世の中の奥さんの不満をまずは払拭したいと思います。pointer-events、ざっくり説明すると、指定した要素にマウスカーソルをを乗せたときの挙動を制御します。
それだけでは崇拝すべきpointer-eventsのすごさが伝わりづらいので、さっそくデモを見ていきましょう。
デモ
さて、pointer-eventsで気にするべき値は、autoとnoneの2つです。
その他はSVGで使われる値で今回は取り上げません。
詳しくはこちらをご確認ください。
https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events
pointer-eventsの初期値はautoです。pointer-eventsを指定していなければautoの状態と同じです。要素にクリックイベントなんぞを登録したらクリックすればイベントが発火する。そんな当たり前の世界です。
一方、noneを指定した場合は、要素をクリックしても反応せず、全力でシカトされます。
個人的によく使うシーンとしては、ハンバーガーメニューのクリックまたはタップで展開される、メニューの表示切り替え時に使用します。
まずは、pointer-eventsを使わずにopacityの操作だけでメニューの表示・非表示を切り替えます。
See the Pen
pointer-events (default) by Zawa (@sowork)
on CodePen.
ハンバーガーメニューをクリックすればメニューは表示されますが、問題なのは、メニューを開いてない状態でも、メニュー内のリンクがクリックできてしまうことです。
See the Pen
pointer-events (none) by Zawa (@sowork)
on CodePen.
そこで、メニュー部分の要素に初期状態でnoneを設定しておき、クリックの反応はさせず、ハンバーガーメニューのクリック時にクラスを付与して、autoに設定を変えてみます。
そうすると、メニューが非表示のときはメニュー内の要素はクリックできず、メニューを表示したときにメニュー内の各リンクはクリックできる、期待通りの挙動になりました。
おわりに
サイト制作ではよく使用するようになりましたが、実生活でも魔法のようにpointer-eventsを使いこなせれば最強なのにと思うことが多々あります。
どういうときにだって？ そりゃもちろんワイフの機嫌が悪いときに、自分にpointer-events: none;を付与して、とばっちりが来ないようにするためさ。
触らぬ神にたたりなし。おあとがよろしいようで……。ワイフいないけど。
それでは、良い制作ライフを！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
