CSSでpointer-eventsのpointerとautoの子要素への影響

この間現場でpointer-eventsのせいで子要素がクリックできないという現象に出くわしました。原因調べた際に、へぇそうなのか。とあまり気にしていなかったpointer-eventsの仕様を学べた気がします。
知っていればあっという間に解決できることでしたので残しておきます。

pointer-events:pointer;

こちらを設定すると子要素にはマウスイベントが伝播ません。
親要素が反応するので、子要素にaタグなどあってもクリックできないです。
tableなどで注意ですね。

pointer-events:auto;

要素上にマウスポインタがある場合、子要素も親要素と同様にマウスイベントを受け取ります。
子要素をクリックしたい、などの時はこちらで対応。