pointer-events クリック無効化

CSS

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

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

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

スマホ・パソコンでの電話発信リンクの表示例

 

この記事を読むと分かること

  • pointer-eventsプロパティの概要について
  • pointer-eventsプロパティが使用されている場面について
  • pointer-eventsプロパティを使用する上での注意点について

 

 

ponter-eventsプロパティとは?

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

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

pointer-events: none;を使用した例

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

pointer-eventsの値 意味
auto(初期値) 通常通り、イベントが作動する。
none イベントが作動しなくなる。

(※ただし、子孫要素に pointer-events の別の値をセットしている場合は、子孫要素に関してはイベントを作動させることができる。)

 

pointer-eventsプロパティで「どんなことができるのか」については分かったのですが、実際にどういった場面で使うことが多いのですか?
pointer-eventsプロパティの使用例については以下で詳しく解説していきますね。

 

 

どんな場面で使用されているか?

pointer-eventsは主に以下のような場面で使用されることが多いです。

■pointer-eventsプロパティの使用例

  1. 表示されているページのナビゲーションリンクのみ無効化する
  2. ウィンドウ幅によってリンクを押せなくする
  3. 画像の保存をさせないようにする
  4. 後ろ側にある要素をクリックできるようにする
  5. ホバーのトリガーになる要素を変更する

 

表示されているページのナビゲーションリンクのみ無効化する

まず1つ目は、表示されているページのナビゲーションリンクのみクリックやタッチイベントを無効化にしたいといった場面です。

例えば「ホーム」画面が開かれている場合は、ナビゲーションにある「ホーム」リンクだけクリックできないといったウェブサイトを見たことがあるかと思います。

「ホーム」画面が開かれている為、「ホーム」だけクリックできない例

これは開かれているページのナビゲーションだけ、spanタグのような異なるHTMLタグを使用しているか、pointer-eventsプロパティを使用してクリックイベントを無効化することで実装されていることが多いです。

 

ウィンドウ幅によってリンクを押せなくする

2つ目は、ウィンドウ幅によってリンクを押せなくしたいといった場面です。

具体的にはメディアクエリを使って、「1025px以上のウィンドウ幅ではpointer-events: none;にする」といったような使い方をします。

本記事の冒頭で説明した、PC表示では電話発信リンクがクリックできないようにするといった場面をイメージしてもらえると分かりやすいと思います。

スマホ・パソコンでの電話発信リンクの表示例

 

後ろ側にある要素をクリックできるようにする

3つ目は、後ろ側にある要素をクリックできるようにしたいといった場面です。

positionなどを使って要素を配置した場合、以下のように要素同士が被るといった時が多々あります。

こういった場合に上に配置された画像に対してpointer-events: none;を指定してあげると下に配置されている要素がクリックできるようになります。

上に配置された画像に対してpointer-events: none;を指定してあげると下に配置されている要素がクリックできる例

 

画像の保存をさせないようにする

4つ目は、画像の保存をさせないようにしたいといった場面です。

通常パソコンであれば、右クリック→「名前を付けて画像を保存」とすればウェブサイトの画像を保存することができますが、画像に対してpointer-events: none;を指定してあげるとこれを防ぐことができます。

pointer-events: none;を指定することで画像の保存ができなくなる例

ただしスクリーンショットを取ることや検証画面から画像のパスを辿って表示させることはできるので、100%他者による画像の保存を防ぐことはできない点に注意が必要です。

 

ホバーのトリガーになる要素を変更する

5つ目は、ホバーのトリガーになる要素を変更したいといった場面です。

通常であればホバーをした際に要素のスタイルを変えたい場合、その要素自身がホバーのトリガーになりますが、親要素と子孫要素の両方にpointer-eventsプロパティを指定してあげることで子孫要素をホバーした際に親要素のスタイルが変更されるようにすることができます。

子要素をホバーしているのに親要素のスタイルが変更される例

こちらは少し応用的な使用場面かもしれません。

 

 

pointer-eventsを使用する上での注意点

ここまででpointer-eventsプロパティの実際の使用例を紹介しました。

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

■pointer-eventsプロパティを使用する上での注意点

  1. IE10以下はサポートされていない
  2. キーイベントは無効化されない

 

IE10以下はサポートされていない

まず1つ目は、IE10以下はサポートされていないという点です。(以下がpointer-eventsプロパティの対応状況。)

その為、IE10以下のブラウザでもクリックやタッチ、ホバーイベントを無効化させたい場合は別の方法を使う必要があります。

 

キーイベントは無効化されない

2つ目は、キーイベントは無効化されないという点です。

例えばリンクにpointer-events: none;を指定してクリックイベントを無効化していても、Tabキーを押してフォーカスを表示し、該当箇所でEnterキーを押した場合はリンク先に飛ぶことができてしまいます。

その為、pointer-eventsプロパティはあくまでも、「要素に対するクリックやタッチ、ホバーイベントなどを無効化できるプロパティ」であるという点に注意しましょう。

 

 

まとめ

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

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

また使用できる値にはいくつかありますが、基本的には以下の2つを覚えておくようにしましょう。

pointer-eventsの値 意味
auto(初期値) 通常通り、イベントが作動する。
none イベントが作動しなくなる。

(※ただし、子孫要素に pointer-events の別の値をセットしている場合は、子孫要素に関してはクリックイベントを作動させることができる。)

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

 

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

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

詳細はこちら

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

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

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


おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2021年版】WordPress(ワードプレス)の使い方総まとめ

WordPress(ワードプレス)の使い方  総まとめ版

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-CSS