今回はCSSのプロパティであるpointer-eventプロパティを使ってクリックイベントを無効化する方法と実際の使用例についてをご紹介します。
「スマホではクリックできる電話発信リンクをPCではクリックできないようにしたい」などといった場面などに活用することができます。
この記事を読むと分かること
- pointer-eventsプロパティの概要について
- pointer-eventsプロパティが使用されている場面について
- pointer-eventsプロパティを使用する上での注意点について
ponter-eventsプロパティとは?
pointer-eventsプロパティは、クリックやタッチ、ホバーイベントなどを無効化することができるプロパティです。
デフォルトでは値が「auto」となっていて通常通りイベントが作動しますが、これを「none」に変更してあげることで無効化することが可能です。
1 |
<a href="#" style="pointer-events: none;">ここはリンクです。</a> |
なお「auto(初期値)」や「none」以外にも値はありますが、それらは全てSVG向けの値となっている為、基本的にはこの2つを覚えておけば問題ありません。
pointer-eventsの値 | 意味 |
---|---|
auto(初期値) | 通常通り、イベントが作動する。 |
none | イベントが作動しなくなる。
(※ただし、子孫要素に pointer-events の別の値をセットしている場合は、子孫要素に関してはイベントを作動させることができる。) |
どんな場面で使用されているか?
pointer-eventsは主に以下のような場面で使用されることが多いです。
■pointer-eventsプロパティの使用例
- 表示されているページのナビゲーションリンクのみ無効化する
- ウィンドウ幅によってリンクを押せなくする
- 画像の保存をさせないようにする
- 後ろ側にある要素をクリックできるようにする
- ホバーのトリガーになる要素を変更する
表示されているページのナビゲーションリンクのみ無効化する
まず1つ目は、表示されているページのナビゲーションリンクのみクリックやタッチイベントを無効化にしたいといった場面です。
例えば「ホーム」画面が開かれている場合は、ナビゲーションにある「ホーム」リンクだけクリックできないといったウェブサイトを見たことがあるかと思います。
これは開かれているページのナビゲーションだけ、spanタグのような異なるHTMLタグを使用しているか、pointer-eventsプロパティを使用してクリックイベントを無効化することで実装されていることが多いです。
ウィンドウ幅によってリンクを押せなくする
2つ目は、ウィンドウ幅によってリンクを押せなくしたいといった場面です。
具体的にはメディアクエリを使って、「1025px以上のウィンドウ幅ではpointer-events: none;にする」といったような使い方をします。
本記事の冒頭で説明した、PC表示では電話発信リンクがクリックできないようにするといった場面をイメージしてもらえると分かりやすいと思います。
後ろ側にある要素をクリックできるようにする
3つ目は、後ろ側にある要素をクリックできるようにしたいといった場面です。
positionなどを使って要素を配置した場合、以下のように要素同士が被るといった時が多々あります。
こういった場合に上に配置された画像に対してpointer-events: none;を指定してあげると下に配置されている要素がクリックできるようになります。
画像の保存をさせないようにする
4つ目は、画像の保存をさせないようにしたいといった場面です。
通常パソコンであれば、右クリック→「名前を付けて画像を保存」とすればウェブサイトの画像を保存することができますが、画像に対してpointer-events: none;を指定してあげるとこれを防ぐことができます。
ただしスクリーンショットを取ることや検証画面から画像のパスを辿って表示させることはできるので、100%他者による画像の保存を防ぐことはできない点に注意が必要です。
ホバーのトリガーになる要素を変更する
5つ目は、ホバーのトリガーになる要素を変更したいといった場面です。
通常であればホバーをした際に要素のスタイルを変えたい場合、その要素自身がホバーのトリガーになりますが、親要素と子孫要素の両方にpointer-eventsプロパティを指定してあげることで子孫要素をホバーした際に親要素のスタイルが変更されるようにすることができます。
pointer-eventsを使用する上での注意点
ここまででpointer-eventsプロパティの実際の使用例を紹介しました。
pointer-eventsは便利なプロパティで様々な場面で使用されますが、注意をしなければならない点もいくつかあります。
■pointer-eventsプロパティを使用する上での注意点
- IE10以下はサポートされていない
- キーイベントは無効化されない
IE10以下はサポートされていない
まず1つ目は、IE10以下はサポートされていないという点です。(以下がpointer-eventsプロパティの対応状況。)
引用元: Can I use?(https://caniuse.com/?search=pointer-events)
その為、IE10以下のブラウザでもクリックやタッチ、ホバーイベントを無効化させたい場合は別の方法を使う必要があります。
キーイベントは無効化されない
2つ目は、キーイベントは無効化されないという点です。
例えばリンクにpointer-events: none;を指定してクリックイベントを無効化していても、Tabキーを押してフォーカスを表示し、該当箇所でEnterキーを押した場合はリンク先に飛ぶことができてしまいます。
その為、pointer-eventsプロパティはあくまでも、「要素に対するクリックやタッチ、ホバーイベントなどを無効化できるプロパティ」であるという点に注意しましょう。
まとめ
まとめです。今回はCSSのプロパティであるpointer-eventプロパティを使ってクリックイベントを無効化する方法と実際の使用例についてをご紹介しました。
pointer-eventsプロパティを使用すると、クリックやタッチ、ホバーイベントなどを無効化することができます。
また使用できる値にはいくつかありますが、基本的には以下の2つを覚えておくようにしましょう。
pointer-eventsの値 | 意味 |
---|---|
auto(初期値) | 通常通り、イベントが作動する。 |
none | イベントが作動しなくなる。
(※ただし、子孫要素に pointer-events の別の値をセットしている場合は、子孫要素に関してはクリックイベントを作動させることができる。) |
今回は以上になります。最後までご覧頂き、ありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました!
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。