はじめに
pointer-eventsというプロパティをご存知でしょうか。
あまり聞き慣れない人や、聞いたことはあるけど使ったこと無いという方、
pointer-eventsは今までJavaScriptの記述が必要だった処理を、
CSS一行で実現してくれる優秀なプロパティです。
自分がよく利用するシーンを例に、
便利さを少しご紹介します。
画像を保存できないようにする
制作会社に働いていると「このタレント画像は保存できないようにしといて。」と一度は言われることがあるのではないでしょうか。
今までは画像保存できないようにするためには、JavaScriptで右クリックできないようにしたり、
CSSで画像の上に透明なレイヤーをかぶせるなどの処理を書いてきました。
右クリック禁止処理だけでは穴があり、Macではドラッグしてデスクトップに貼り付けることができます。
CSS一行で解決
pointer-events: none; を保存させたくないimgタグか、親要素に指定してあげれば
右クリックをしても画像保存の項目が出てきません。
pointer-events: none; を指定することですべての画像のポインターイベント (クリック、ドラッグ、ホバー等) を無効にします。
See the Pen pointer-events demo1 by seiya kato (@mokichi) on CodePen.
リンクやsubmitを無効にする
リンクを無効にしたり、フォームで未回答の際は送信ボタンを押せないようにする処理など、とても簡単に設定できます。
無効にしたいaタグやbuttonに pointer-events: none; を指定するだけで無効化されます。
See the Pen pointer-events demo2 by seiya kato (@mokichi) on CodePen.
リンクにかかる要素はポインターイベントを無効にする
バナーなどの上に吹き出しやオブジェクトが重なってリンクエリアが狭くなる、もしくは広くなってしまう場合、
覆いかぶさっている要素に pointer-events: none; を設定することで解消することができます。
画像を要素がかぶっている箇所にマウスカーソルを合わせて確認してみてください。
See the Pen pointer-events demo3 by seiya kato (@mokichi) on CodePen.
親要素はクリック無効。子要素はクリック有効に
あまり需要はないかもしれませんが、
子要素はクリックを有効に、親要素はクリックを無効にしたい場合などがあります。（逆もあります。）
薄い赤背景部分が親要素です。
親要素に pointer-events: none; を指定することで、親要素に隠れていても下に要素が隠れてしまっても要素を選択することができます。
See the Pen pointer-events demo2 by seiya kato (@mokichi) on CodePen.
最後に
一昔前まではパワープレイで記述していたものが、
CSS一行で解決できてしまう素晴らしい世の中になりましたね。
IE様がご隠居していただければ、もう少し豊かになるのではないかと思う、今日このごろでした。
ありがとうございました。