HTML要素を無効化する方法の一つに、pointer-eventsというCSSプロパティに「none」を指定すると言う方法があることを知ったので、学んだことをメモ。
無効化したいHTML要素のCSSに、「pointer-events: none」を指定するだけと言うとても簡単な使い方なのだが、便利な使いどきや、使う際の注意点がいくつかあるようなので、それらをまとめて紹介する。
pointer-events: none とは
pointer-eventsとは見ての通り、CSSプロパティの一つだ。
pointer-eventsプロパティに「none」を指定することで、
指定したHTML要素のクリックやタッチを無効化することができる。
「誤ってクリックしてしまった」「誤って入力値を変更していた」などの自体を防ぐことができるため、何か特定の条件の時に、要素を無効化したい時に便利なプロパティだ。
ちなみにデフォルト値はautoになっているので、noneを解除したい時は、autoを指定するなどすれば良い。
- HTML要素のクリックやタッチを無効化することができるCSSプロパティ
- デフォルトの値は「auto」
pointer-events: none の使い所
では早速、pointer-events: none; を使うと便利なシーンを、
実例を踏まえながら紹介していく。
①要素のクリック・タッチの無効化
まずは、pointer-events: none;の基本的な使い方として、
要素のクリック・タッチの無効化に使用することができる。
ボタンの無効化や
セレクトボックスの無効化
テキストボックスの無効化なんかもできる
read-only属性やdisable属性と同じような使い方ができるのが特徴。
②divごと無効化
次に、pointer-events: none;を使うと、
div要素ごと無効化することが可能と言うことを覚えておいて欲しい。
そうすることで、
子要素まで丸ごと無効化することができる。
要素に一つ一つpointer-events: none;を指定しても良いのだが、
指定する数が多い場合指定するのが大変である。
その時は、親divにpointer-events: none;を指定すると楽。
上記は筆者が実際に使っている例だが、結構便利でおすすめである。
ただ、範囲が大きくなって、思わぬバグに繋がってしまう可能性があるので、使う時は注意すること。
画像を右クリックで保存できなくする
img要素に対してpointer-events: none;を使うと、
画像の右クリック保存を無効化することができる。
#画像保存を無効化
<img src="hoge.jpg" alt="" style="pointer-events: none;">通常、ブラウザに表示されたimg要素の画像は、PCの場合は右クリックから画像を保存、スマートフォンの場合は長押しで画像を保存できるが、pointer-events: none;を指定をすることによって画像の保存ができなくなる。
業務上、保存できないようにする必要がある場面に使うようにすると良いだろう。
pointer-events: none を使用する際の注意点
最後に、pointer-events: none;を使用する際の注意点をいくつか紹介する。
IE10以下では動作しない
使用するブラウザーに関する注意で、
pointer-eventsプロパティは、IE10以下ではサポートされていない。
IE11以上、その他モダンブラウザーやiPhone、Androidのブラウザーでは有効だ。
なのでpointer-eventsプロパティは基本的に、
モダンブラウザーやスマートフォン向けに使っていくことを想定しよう。
キーイベントは無効化しない
pointer-eventsプロパティは、
キーイベントは無効化しない点に注意が必要。
そのため、キーボードを用いた操作などに対して無効化を実現できない点ので覚えておこう。
例えば、pointer-events: none; で無効化していても、Tabキーを押してHTML要素のフォーカスを移動していき、該当のHTML要素にてEnterキーを押した場合は。クリックしたのと同等の挙動になってしまうなどがある。
関連
https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events
https://techblog.yahoo.co.jp/advent-calendar-2016/css_pointer_events/
