img 要素に pointer-events: none; を指定すると、それを囲んでいる a 要素のリンクが効かなくなる件と、その回避方法
- 画像をむやみに右クリックで保存されないようにするため、img 要素に pointer-events: none; を指定する。
これにより、画像の上で右クリックをしても、「名前を付けて画像を保存」といったコンテキストメニューが表示されなくなる。
- すると、今度は img 要素を囲んでいる a 要素のリンクも効かなくなってしまう。
「Bad」はこの状態。
- a 要素はリンクとして効かせつつ、img 要素は右クリックしても「名前を付けて画像を保存」を表示させないようにするには、img 要素を囲んでいる a 要素に display: inline-block; を付与すると回避できる。
「Good」はこの状態。
- a 要素に指定する display プロパティは block でも良いが、inline だと効果がなかった。
- 「Normal」は参考までに、pointer-events 指定をデフォルトの auto にした場合の、普通のリンク付き画像。コンテキストメニューやリンクの動作を比較してみて欲しい。