Les éléments désactivés doivent-ils jamais avoir des événements de pointeur?
Les navigateurs modernes ont une propriété CSS appelée pointer-events qui a une valeur possible de none. Cette valeur fait en sorte qu'aucun écouteur JavaScript ni aucune pseudo-classe CSS déclenchée par des événements (:hover, :active, etc.) ont un effet.
Pour moi, cela a du sens de s'appliquer aux éléments désactivés. Cependant, cela signifierait que les éléments désactivés n'auraient jamais un curseur différent comme not-allowed.
Les éléments désactivés doivent-ils jamais avoir des événements de pointeur? Ou certains événements de pointeur (comme changer le curseur au survol) sont-ils utiles pour les éléments désactivés?
Du point de vue UX, il y a des choses qui pourraient être faites pour aider l'expérience utilisateur en ne définissant pas les événements de pointeur sur aucun. Montrer des champs désactivés à une personne est parfois cruel. Si les règles pour lesquelles le champ est désactivé sont complexes et ne sont pas évidentes à partir de la disposition de l'écran, c'est comme tenir une carotte hors de portée de la personne qui essaie d'utiliser le système. J'ai vu certaines applications de bureau qui activent l'aide au niveau des champs pour les champs désactivés, vous permettant de savoir que vous devez faire pour autoriser le champ à être activé.
Un curseur non autorisé n'est probablement pas très utile, sauf s'il s'agit d'une cible de dépôt à l'aide d'une interface utilisateur glisser-déposer.
je n'utiliserais pas pointer-events:none; sur un bouton désactivé.
Il est préférable de régler manuellement le curseur et l'effet de survol sur l'état par défaut/désactivé.
Dans certains cas, il est utile d'ajouter une info-bulle à un bouton désactivé; pointeur-événements aucun ne désactiverait cela.
J'ai ajouté un cas d'utilisation pour pointer-events:none; ci-dessous si vous êtes intéressé ..
Exemple d'utilisation d'événement de pointeur
Il est généralement utilisé pour permettre l'interaction avec les éléments derrière l'élément auquel il est appliqué.
Voici un exemple que j'ai utilisé pointer-events:none; récemment.
L'icône de la loupe se trouve sur une image avec un lien hypertexte, sans y attacher pointer-events:none; à l'icône - l'utilisateur ne déclencherait pas le lien s'il cliquait sur l'icône.
