今のスマホ全盛のコーディングではよく使う？
pointer-eventsの設定や事例と効かない時の注意点も

以前の解説に、Aタグのtel:でスマホ以外では電話発信しないための設定を解説してきましたが、今回はそこでも使われていた、pointer-eventsについて、詳しく見ていきたいと思います。

スマホでは電話発信するけれど、PCからは発信がないので発信しないようにという使い方がメインにはなりますが、それら以外の使い道や、そもそものpointer-eventsのタグの詳細などについてや使う上での注意点なども見ていきたいと思います。

pointer-eventsプロパティについて

ではあらためてpointer-eventsプロパティについて見ていきましょう。
冒頭でも書いたように、スマホでの電話発信をPCでは発動しないようにするという使い方で一躍有名と言いますか、使われるようになったプロパティかと思います。

実際、このプロパティがどういう役割を持っているのかというと、クリック（タップ）などの有効/無効化を設定したり、ホバーイベントなどの有効/無効化を設定したりすることができるプロパティとなっています。

初期値について

では実際の使い方・設定について見ていきましょう。
まず、そもそもこのpointer-eventsプロパティは、デフォルトではauto;という値が設定されています。

pointer-events: auto;

文字通りオートのためいわゆる一般的でよく見ている操作となり、下記のようにクリックやドラッグなど自由にできます。

変更する際にはこのauto;の値を変更する必要があるのですが、変更できる値としては多くの値があるのですが、実際の現場で使うのはほとんどのケースでnone;という値を指定することになり、それによって色々な使い方を行う事ができます。

また、none;以外の値もあるにはあるのですが、他の値は全て「svg」用に用意された設定になっており、あまり使う機会は多くないと言えます。（実際自分もnone;以外を使う機会はありません）

参考記事
https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events

値の変更と書き方について

実際の書き方としては下記の通りです。

pointer-events: none;

このnone;を指定すると、指定した要素でイベントの対象となることがあります。
そう書くと日本語がややこしく感じますが、簡単にわかりやすく言い換えると、クリックしたりタップしたりなどができなくなるというニュアンスです。

実際に下記のサンプルはpointer-events: none;を指定したものになります。

テキストに指定すると特に変わりが無いようにも思われますが、テキスト上にカーソルを当てると、ポインターが変更しているのがわかるかと思います。

一番この設定でわかりやすいのが、リンクに当てる形式になり、下記のように<a>タグを使ったリンクにpointer-events: none;を設定すると、リンクが効かなくなります。

リンクを設定しているため、本来であればクリック・タップすればリンク先に飛べるはずですが、イベント無効の処理をしているため、何も起こらなくなります。

ただタグ自体はAタグを使っているため、CSSでの装飾は当サイトで指定のAタグ用の青文字のテキストカラーになっているという次第です。

こういったリンク無効化はこれだけで使うと、リンクのようでリンクが効いていないという使い勝手の悪い状態になるため、以前の記事で解説したようにCSSやJSを使って、切替つつnone;を指定したときはテキスト表記のように見せたりなどするのがオススメです。

実際にどういうシーンで使われるのかの解説と紹介

とはいえこれだけ見て来ても、あまり具体的にどういうシーンで使うのかというのがイメージしにくいかと思いますので、実際に使われるシーンとしてどういうところがあるのかなどについて紹介しておきたいと思います。

aタグのtelでの電話発信をPCで無効にする

おそらく一番使われているシーンはこれかと思います。
先ほども書いてきたように、このブログでも別途解説していますが、電話発信が可能なAタグのtel要素をPCでは無効にするというケースで使われます。

電話発信はスマホではそのまま発信が可能ですが、PCでは電話番号などのリンクをクリックしても、発信可能な設定をしているPCはほとんどないため、スマホでは電話発信、PCではただのテキストや画像の表示にするという事でよく使われています。

下記に実際のサンプルを作りましたが、640pxを境目に大きければ通常のテキストとして表示し、640px以下であればAタグのまま電話発信できるようになっています。

ナビゲーションなどで今のページのリンクを無効化する

これも割と多く使われているかもしれません。
よくグローバルナビゲーションなどで、今自分が見ているコンテンツだけ色を変えたりして、今あなたはここを見ていますよ。といった表示をする事があるかと思います。

そんなとき、今見ているページのリンクをクリックしても同じページが表示されるだけということになるため、pointer-events: none;を設定して、自分が今見ているリンクはクリックできないようにする。といった使い方もあります。

余談ですが、このような場合、pointer-eventsを使うケースもあれば、JavaScriptなどを使って、Aタグをspanタグに置き換えてリンクしないようにするといったような使い方をすることもあるかもしれません。

疑似要素などを使った時のhoverやクリック時で邪魔になる要素を無効化

このあたりはコーディングの作り方・組み方次第にはなりますが、人によって組み方や構築の仕方などによっては、疑似要素を使った時にhoverやクリックなどに影響が出るケースもあります。

例えば下記にサンプルボタンを用意していますが、マウスオーバーをしたときににボーダーの色が変わり、リンクボタンのためクリックもできるようになってますが、疑似要素で付けた「→」にカーソルを当てると、hoverが外れてしまいますし、リンクもクリックできなくなります。

ボタン

こういったケースの場合、その疑似要素にpointer-events: none;を付与してあげれば、疑似要素のところにカーソルを当てたとしても、無視してくれるのでマウスオーバーもクリックも問題なく行えるようになります。

ボタン

同じように下記のような疑似要素の場合も、pointer-events: none;を付与しなければ、LINKの枠にマウスを当てればホバーやリンクが消えてしまいます。

ボタン

none;を付与してあげれば、疑似要素のLINKという枠にマウスカーソルを当ててもホバーもリンクも処理が行われますし、付与しなければ疑似要素のところにカーソルを当てれば消えてしまいます。

ボタン

余談ですが、組み方によりますが、今回のような組み方でネガティブマージンを使った場合は、マイナスを与えてはみ出た部分は、そもそもホバーやクリックの対象から外れてしまいますので、その際はコーディングの構築の仕方を変えるなど工夫するようにしましょう。

※上のサンプルで、黒枠のLINKの文字の枠線の外の部分にカーソルを当てるとわかるかと思います。

LPなどでボタンなどの上に疑似要素で画像などを重ねて作ったりする事もあるかもしれませんが、そういった時、きちんと疑似要素に付与しておかないと、ボタンのリンクがうまく動作しないなんて事もあり得るので注意が必要です。

子要素のホバー時に親要素のスタイルを変更する

少し特殊的な使い方にはなりますが、子要素のリンクやボタンをホバーした際に、親要素のスタイルを変更する方法としても使う事ができます。どういう事かというのは下記の事例を見た方がわかりやすいかと思います。

本来であれば、親要素をマウスオーバーした際に背景の色が変わるようになるはずが、pointer-events: none;で打ち消し、リンクのAタグにpointer-events: auto;を付ける事で、マウスオーバーした際に親要素の色が変わるといった見え方になっています。

ブログなどで、ボックス全体の色が事前に変わってしまうのが嫌だといった場合にこういったところを使って対応したりすることもあるかもしれませんが、スマホ全盛の今ではそこまで使い道が多いとは言えないかも知れません。

画像保存させないために使うのはあまり意味がない

このpointer-eventsの活用方法として、右クリックでの画像保存をさせないといった解説をよく見かけたりしますが、ぶっちゃけ本音を言ってしまえばそのために使うのはあまり意味がありません。

結局のところ、ソースを見れば画像のパスが当然判明しますし、いわゆるF12の開発者モードを使えばすぐ画像が出てきますし、スクリーンショット自体は撮ったりもできますので、あまりITやネット、パソコンに詳しくないという人向けのサイトでない限りは意味をなさないとなってしまいます。

例えば、色んな権利絡みなどでメインビジュアルの画像にだけそういった設定をしておくなど少し特殊なケースだったりしない限りはあまりやっても効果的ではないかなと思います。

設定が効かない時の対処法やその他の注意点

この要素を使う事に慣れていないうちは、pointer-events: none;を設定したのに効かない！なぜ？？といったシーンに出くわす事があるかもしれません。

昔のchrome（Edge）ではバージョンなどによってバグなのか効かない時が設定によってはあったりしましたが、今ではそういった事もなく普通に対応されてるので、きちんと設定されていれば問題なく動くかなと思います。

その頃の他サイトなどでの記事だと、inline要素で使うと動かないといった事が書かれてたりしますが、今では普通に問題なく動きますので、そこまでそのあたりを気にする必要はないかと思いますが、細かい注意点もいくつかあるので最後にまとめておきたいと思います。

TABなどでのキーイベントは無効化されない

これはそのままですが、あくまでもリンクをCSSで無効化しているだけで、リンク自体を消しているわけではないためリンクそのものは生きています。

そのため、TABキーなどでリンクを辿ればリンク先へアクセスするといった事は可能です。

このように、マウスカーソルでリンク先に辿ることはできませんが、キーイベントは無効化されるわけではないため、ページの遷移ができないわけではないため注意しましょう。

JavaScriptと競合などしないように注意する

小規模サイトや自分だけで対応する場合ならそこまで問題にならないのですが、こういったクリックできるできない、といったような設定の多くはCSSではなくJavaScriptを使って設定することが多いと言えます。

JavaScriptの設定によっては、CSS側でpointer-events: none;を設定していることで意図した動きにならない、none;を設定しているのに効かない！といった事が起こる可能性もありますので、そのあたりは注意しておきましょう。

まとめ

今回はpointer-eventsについてまとめてみました。
意外と使わないようで使い道があったりするものになり、特にスマホが今はアクセスの中心のため電話番号絡みの時によく使われるのではないかと思います。

自分もよくLPの制作などで電話番号のリンクなどが必要な時はPCでは無効化、スマホでは有効化するような使い方を使う機会も多いです。

意外とこんな使い方も出来るなといった事もありますので、しっかりと使い方の基本をおさえて必要な時に使えるようになっておきましょう。