jQueryを使わなくてもクリックイベントを制御できるCSS「pointer-events」についてです。

使ったことなかったんですが、最近使う機会があってこんなのあったんだ！と新鮮だったのでシェアしたいと思います。

対応ブラウザについて

クロスブラウザは問題なさそうですがIEに限っては11のみ対応です。早く普及してほしい。

pointer-eventsの使い方

さっそく使い方についてですが、使い方は簡単で無効にしたいものをCSSで１文記述するだけ。

pointer-events: none;

で無効化することができます。デフォルトだとautoになってます。autoになると有効ということですね。

pointer-eventsの実例

実際に例として作ってみました。

２つaタグでリンクを作ってますが、上にあるボタンが通常リンク。下にあるボタンにはpointer-eventsで無効化しています。わかりやすいようにホバー時の色変えなども設定、リンク先はブログトップにしてあります。

See the Pen MvdXQN by tatsuya nakafuji (@handywebdesign) on CodePen.

上にあるボタンは通常どおり、ホバーすると色が変わったりリンク先に遷移できます。

下にあるボタンも同様のリンクですが、pointer-eventsで無効化しているのでホバー時に色も変わらないし、リンク先に飛ぶこともできなくなっています。

一文で設定できるから簡単でいいですね！

どんな時に使える？

使い方は考え方次第で様々ですが、例えば

メディアクエリを使って、PC表示ではリンクにして、SP表示では無効にしたい時

aタグ要素としては残しておきたいけど、リンクに飛ばないようにしたい時

とかに使えるかな？と思います

要素を除外視する時も使える

あとは例えばこんな風に、ボタンの上に要素がかぶっていてリンクが機能しない！ということがあった時に上にある要素に対してpointer-events: none;を設定すると、その要素がマウスに反応しなくなるので下にあるボタンが機能します。

See the Pen LjorKz by tatsuya nakafuji (@handywebdesign) on CodePen.

結構工夫すると色々と使えそうなので、覚えておくと便利だと思います。