Un workaround CSS pour ne pas avoir de valeur inattendue dans le event.target d'un event handler en Javascript quand vous l'attachez à un élément plus haut dans le DOM.

Ça fait un peu bizarre de devoir mêler ainsi du CSS et du JS mais pourquoi pas. Attention au support navigateur par contre.

Je ne connaissais pas la propriété "pointer-events" mais elle peut être bien pratique pour désactiver complètement un élément de l'UI avec "pointer-events: none;".
Bon par contre prudence, il s'agit d'une spécification CSS3 destinée à l'origine aux éléments SVG, et repoussée à CSS4 pour les autres éléments. Donc le support navigateur risque d'être chaotique.