【CSS】pointer-eventsでクリックイベントを無効化する

pointer-events

クリック・タッチイベントを無効化するcssプロパティです。
aタグや、画像などクリックされたくないときに便利です。
デモでは、画像の下に配置された、aタグをクリックさせるために、
画像に、pointer-eventsをかけています！

id名または、クラス名{
            pointer-events :  none;
        }

初期値は「auto」になってます。
ほかにもいろいろとありますが、「auto,none」以外はSVGに関係してくるので
基本は、気にしなくても問題ないと思います！
気になる方は、こちらから調べてみてください。

使用例はいくつかあると思いますが、私が思いついたのは3つです。

1.リンクのクリック、画像の保存を回避する
2.メディアクエリで条件下でのみクリック・タップイベント無効化させる
3.DEMOページのような重ね順が下のものをクリックさせる

コードは簡単です。

<a href="###" style="pointer-events: none;">無効化</a>
<img src="###" alt="" style="pointer-events: none;">

例では、640px以下の時、クリック・タップイベントを無効化します

@media (max-width: 640px){
        id名または、クラス名{
            pointer-events:none;
        }
    }

下記、DEMOページ作成時のコードです

例)HTML

<div class="demo">
<a href="#">クリック・タッチイベント</a>
<img src="#" alt="">
</div>

例)CSS

.demo{
position: relative;
text-align: center;
}
img{
pointer-events: none;
position: absolute;
top: -5px;
left: 0;
right: 0;
margin: 0 auto;
}

便利なプロパティではありますが注意点があります

IE10以下には効かない
画像保存の回避は、100％ではないこと
キーイベントでは、無効化されずTabキー+Enterキーではリンクページに移動します
jQueryや、javascriptとの連携はしっかり行う。
pointer-events: none; が利いているとJavaScript側での指定が思った通りに
動かないという事が起こり得ます。

いかがでしたか？
見た目だけ装飾させたいときや、条件下のみ無効化したい時など
使いどころはあるかなと、思います！
個人的には、重ね順が下のものをクリックさせるために使うのが、
1番使われそうなイメージです！