pointer-events: none;が効かない。Edge + a要素 + display:inline;の組み合わせは要注意。

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要素がクリック(タップ)できてしまい、アラートが出るようにスクリプトを入れてあります。

以上に挙げた条件以外でも期待通りの動作をしないケースがあるようです。以下の記事が参考になります。

CSS pointer-events 2016 – dskd