pointer-eventsを使ってクリックを無効化する方法！実際の使用例も紹介

今回はCSSのプロパティであるpointer-eventプロパティを使ってクリックイベントを無効化する方法と実際の使用例についてをご紹介します。

「スマホではクリックできる電話発信リンクをPCではクリックできないようにしたい」などといった場面などに活用することができます。

ponter-eventsプロパティとは？

pointer-eventsプロパティは、クリックやタッチ、ホバーイベントなどを無効化することができるプロパティです。

デフォルトでは値が「auto」となっていて通常通りイベントが作動しますが、これを「none」に変更してあげることで無効化することが可能です。

なお「auto(初期値)」や「none」以外にも値はありますが、それらは全てSVG向けの値となっている為、基本的にはこの2つを覚えておけば問題ありません。

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は便利なプロパティで様々な場面で使用されますが、注意をしなければならない点もいくつかあります。

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つを覚えておくようにしましょう。

今回は以上になります。最後までご覧頂き、ありがとうございました。

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。