Événements-pointeurs - Astuces CSS

La pointer-eventspropriété permet de contrôler la façon dont les éléments HTML répondent aux événements de souris / toucher - y compris les états de survol / actif CSS, les événements de clic / tap en Javascript et si le curseur est visible ou non.

.avoid-clicks ( pointer-events: none; )

Alors que la pointer-eventspropriété prend onze valeurs possibles, toutes sauf trois sont réservées à une utilisation avec SVG. Les trois valeurs valides pour tout élément HTMl sont:

none empêche toutes les options de clic, d'état et de curseur sur l'élément HTML spécifié
autorestaure la fonctionnalité par défaut (utile pour une utilisation sur des éléments enfants d'un élément avec pointer-events: none;spécifié
inheritutilisera la pointer-eventsvaleur du parent de l'élément

Découvrez ce stylo!

Comme démontré ci-dessus, le principal cas d'utilisation pointer-eventsest de permettre au comportement de clic ou de tapotement de «passer» un élément à un autre élément situé en dessous sur l'axe Z. Par exemple, cela serait utile pour les superpositions de graphiques ou pour masquer des éléments avec opacity(par exemple des infobulles) tout en permettant la sélection de texte sur le contenu en dessous.

Points d'interêts

«L'utilisation d'événements de pointeur en CSS pour les éléments non SVG est expérimentale. La fonctionnalité faisait partie du projet de spécification de l'interface utilisateur CSS3 mais, en raison de nombreux problèmes en suspens, a été reportée à CSS4. » - Mozilla MDN
"Si vous ajoutez un écouteur d'événement de clic à un élément, puis supprimez le style d'événements de pointeur (ou changez sa valeur en auto, l'événement de clic déclenchera la fonctionnalité désignée. Fondamentalement, l'événement de clic respecte la valeur des événements de pointeur." - David Walsh

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.