pointer-events: none;
は要素にマウスやタッチで触ることができなくなるCSSのプロパティです。
最近よく使うようになったのですが、Edgeでうまく動作しないケースに遭遇し、何でだーとなったので記録を残しておきます。
原因
原因はEdgeのpointer-events: none;
の実装にあるようです。
a要素にpointer-events: none;
とdisplay:inline;を同時に適用すると、pointer-events: none;
が機能しなくなります。Edgeのバグではないかと思われます。
対策
displayをinline以外の値に変えてやると正常に機能します。
以下に確認用のサンプルを作成しました。Edgeだとpointer-events: none;
が動作せずa要素がクリック(タップ)できてしまい、アラートが出るようにスクリプトを入れてあります。
以上に挙げた条件以外でも期待通りの動作をしないケースがあるようです。以下の記事が参考になります。