cssプロパティpointer-eventsを教えてもらい、意外に便利！と思ったので書きます。
ここだけJSを使うのも面倒だし、cssだけでクリック無効にできないかな…って思った時に使えるプロパティです。
概要
cssプロパティpointer-eventsは
特定の要素がマウスイベントの対象になる場合に、クリックされた際の挙動を指定します。
普通の要素では、使えるプロパティの値はautoとnoneだけですが（グローバル値を除く）、
SVGには様々なプロパティ値が指定できます。
こんな時
- 特定の条件下で、
aタグ等の動作を無効にさせる - スマホで画像を長押し保存させない
- ボタン上に、デザインのために置いた要素をクリックできないようにする
使い方
クリックされたくない要素にpointer-events:noneを指定。
逆に、クリックできなくしていたものを、できるようにしたい時は、pointer-events:autoを指定。
注意
IE10以下のブラウザでは未対応です。
また、キーボードでの指示は無効にならないみたいです。