La propriété Pointer-Events est utilisée pour contr?ler si un élément répond à un événement de souris. Ses principales utilisations incluent: 1. Désactiver le clic des boutons ou des liens. En définissant des événements de pointeur: aucun, les éléments ne sont pas interactables et ils sont souvent invités à des changements de transparence; 2. Réalisez la pénétration de la souris pour que l'élément supérieur ne bloque pas l'interaction de l'élément inférieur; 3. Contr?lez le comportement d'interaction dans différents états, tels que l'auto (par défaut) et aucun (désactivé), et peut également être commuté dynamiquement en combinaison avec JavaScript; 4. Faites attention aux problèmes de compatibilité et d'accessibilité lors de l'utilisation, tels que le safari mobile prend en charge les restrictions et les tests de navigation au clavier.

Parfois, nous voulons que certains éléments sur la page Web soient ?indifférents? aux événements de souris, tels que cliquer, planer ou glisser. CSS fournit une propriété très pratique pour contr?ler ce comportement: pointer-events . Il peut déterminer directement si un élément répond aux interactions de la souris.

Utilisations courantes: désactiver les clics de boutons ou de liens

Dans certains scénarios, vous voudrez peut-être rendre temporairement un bouton inclicable, comme lorsque le formulaire n'a pas encore été rempli. Beaucoup de gens utiliseront l'attribut disabled pour désactiver <button></button> , mais si vous êtes confronté à la balise <a></a> ou au composant personnalisé, vous pouvez utiliser pointer-events :

 .Disabled-link {
  Pointer-Events: Aucun;
}

Après avoir ajouté ce style, peu importe comment l'utilisateur clique, l'élément ne déclenchera aucun événement de souris. Dans le même temps, il peut mieux transmettre l'état "actuellement inopérable" avec des styles de transparence ou de cendrier (comme opacity: 0.5 ).

Remarque: Même si pointer-events: none est défini, JavaScript peut toujours déclencher activement le comportement de clic via le code. Par conséquent, il est principalement utilisé pour les restrictions de niveau UI plut?t que pour la protection de la sécurité.

Pénétration de la souris: Faites en sorte que l'élément supérieur ne bloque pas les clics

Parfois, il y a une superposition dans la disposition de la page, comme une bo?te d'invite translucide, mais elle ne devrait pas empêcher l'utilisateur d'interagir avec le contenu ci-dessous. Vous pouvez le définir comme ceci:

 .Overlay {
  Pointer-Events: Aucun;
}

De cette fa?on, l'événement de la souris "passera" cette couche et agira directement sur les éléments ci-dessous. Ceci est utile pour construire des composants d'interface utilisateur non bloquants, tels que des conseils d'aide flottants ou des graphiques décoratifs.

Cependant, vous devez également être prudent lorsque vous l'utilisez, en particulier lorsqu'il existe plusieurs couches interactives, ce qui peut facilement conduire les utilisateurs à toucher accidentellement et à ne pas trouver le problème.

Contr?ler le comportement d'interaction dans différents états

En plus de désactiver ou d'activer complètement les événements de la souris, pointer-events prennent également en charge les méthodes de contr?le plus granulaires. Par exemple:

• auto : valeur par défaut, réponse normale aux événements de la souris
• none : pas de réponse du tout
• visiblePainted (spécifique au SVG): ne répondez que si la souris est sur une zone visible et dessinée
• visibleFill / visibleStroke , etc. (également utilisé pour SVG)

Les plus couramment utilisés dans le développement réel sont auto et none . Cependant, dans certaines interactions complexes, ces valeurs peuvent également être commutées dynamiquement en combinaison avec JS. Par exemple:

 element.style.pointerevents = 'Aucun';

Ceci est très courant dans des scénarios tels que la mise en ?uvre de fenêtres contextuelles, le chargement d'animations et les états de transition.

Méfiez-vous des problèmes de compatibilité et d'accessibilité

Bien que pointer-events soient bien pris en charge dans les navigateurs modernes, les points suivants doivent être notés:

• Mobile Safari a un support limité pour certaines valeurs (en particulier dans les scénarios non-SVG)
• L'utilisation pointer-events: none n'affectera le comportement des lecteurs d'écran? Habituellement pas, car c'est un contr?le de niveau visuel et n'affecte pas l'accessibilité DOM
• Si vous comptez sur la navigation au clavier, n'oubliez pas de tester si l'ordre des clés de l'abri est raisonnable et ne laissez pas l'utilisateur "coincé" sur un élément inopérable.

Fondamentalement, c'est tout. La ma?trise de l'utilisation des pointer-events peut vous donner plus de flexibilité dans le contr?le de la logique d'interaction de la page Web, mais son effet est souvent "silencieux". N'oubliez pas de donner des commentaires clairs sur l'interface utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!