Posted at

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

More than 1 year has passed since last update.

cssプロパティpointer-eventsを教えてもらい、意外に便利!と思ったので書きます。

ここだけJSを使うのも面倒だし、cssだけでクリック無効にできないかな…って思った時に使えるプロパティです。


概要

cssプロパティpointer-events

特定の要素がマウスイベントの対象になる場合に、クリックされた際の挙動を指定します。

普通の要素では、使えるプロパティの値はautononeだけですが(グローバル値を除く)、

SVGには様々なプロパティ値が指定できます。


こんな時


  • 特定の条件下で、aタグ等の動作を無効にさせる

  • スマホで画像を長押し保存させない

  • ボタン上に、デザインのために置いた要素をクリックできないようにする


使い方

クリックされたくない要素にpointer-events:noneを指定。

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


注意

IE10以下のブラウザでは未対応です。

また、キーボードでの指示は無効にならないみたいです。