CSS

クリックイベント等を無効にするpointer-eventsが便利

cssプロパティpointer-eventsを教えてもらい、意外に便利!と思ったので書きます。
ここだけJSを使うのも面倒だし、cssだけでクリック無効にできないかな…って思った時に使えるプロパティです。

概要

cssプロパティpointer-events
特定の要素がマウスイベントの対象になる場合に、クリックされた際の挙動を指定します。
普通の要素では、使えるプロパティの値はautononeだけですが(グローバル値を除く)、
SVGには様々なプロパティ値が指定できます。

こんな時

  • 特定の条件下で、aタグ等の動作を無効にさせる
  • スマホで画像を長押し保存させない
  • ボタン上に、デザインのために置いた要素をクリックできないようにする

使い方

クリックされたくない要素にpointer-events:noneを指定。
逆に、クリックできなくしていたものを、できるようにしたい時は、pointer-events:autoを指定。

注意

IE10以下のブラウザでは未対応です。
また、キーボードでの指示は無効にならないみたいです。