Explication détaillée de l'utilisation des événements de pointeur en CSS3

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des événements de pointeur CSS3. Quelles sont les précautions lors de l'utilisation des événements de pointeur CSS3. Ce qui suit est un cas pratique, jetons un coup d'œil.

Que sont les événements de pointeur ?

Comme son nom l'indique, les événements de pointeur sont un attribut pour les événements de pointeur HTML.

les événements de pointeur peuvent désactiver le survol/le focus/l'actif et d'autres effets dynamiques des éléments HTML.

La valeur par défaut est auto, syntaxe :

événements de pointeur : auto | visiblefilled | visiblefill visible | us Attributs auto | none couramment utilisés. Il convient de noter que les autres attributs ne sont applicables qu'aux éléments SVG.

auto : les événements de pointeur peuvent être utilisés.

aucun : Désactiver les événements de pointeur. Il est à noter que lorsque l'élément avec le pointeur désactivé a des éléments enfants/parents, l'événement sera déclenché sur ses éléments enfants/parents pendant la phase de bouillonnement/capture temporelle.

Scénarios courants

1. Désactivez un effet d'événement d'étiquette

Lors du changement d'onglet, lorsque l'élément actuel est sélectionné, l'événement du courant l'étiquette est désactivée, uniquement lors du changement d'autres onglets, de nouvelles données seront à nouveau demandées.

2. Activer/désactiver le bouton

<!--CSS-->
 <style>
     .active{
         pointer-events: none;
     }
 </style>
 <!--HTML-->
 <ul>
     <li><a class="tab"></a></li>
     <li><a class="tab active"></a></li>
     <li><a class="tab"></a></li>
 </ul>

statut Lorsque vous cliquez sur le bouton Soumettre, afin d'empêcher l'utilisateur de cliquer sur le bouton tout le temps, une requête est envoyée, lorsque la requête ne renvoie pas de résultat, ajoutez pointer-events: none au bouton pour éviter cette situation, qui est également très courante en entreprise.

3. Empêcher les éléments transparents et cliquables de se chevaucher et de ne pas être cliquables

<!--CSS-->
 .j-pro{
     pointer-events: none;
 }
 <!--HTML-->
 <button r-model={this.submit()} r-class={{"j-pro": flag}}>提交</button>
 <!--JS-->
 submit: function(){
     this.data.flag = true;
     this.$request(url, {
         // ...
         onload: function(json){
             if(json.retCode == 200){
                 this.data.flag = false;
             }
         }.bind(this)
         // ...
     });
 }

Afin d'obtenir de jolis effets CSS dans la zone d'affichage de certains contenus, lorsqu'il y a d'autres éléments au-dessus de l'élément, dans l'ordre, les événements qui n'affectent pas les éléments ci-dessous peuvent être résolus en ajoutant des événements de pointeur : aucun aux éléments couverts.

<!--CSS-->
 .layer{
     backround: linear-gradient(180deg, #fff, transparent);
 }
 .j-pro{
     poninter-events: none;
 }
 <!--HTML-->
 <ul>
     <li class="layer j-pro"></li>
     <li class="item"></li>
     <li class="item"></li>
     <li class="item"></li>
 </ul>

Compatibilité poninter-events

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, s'il vous plaît venez pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation des pseudo-éléments ::avant et ::après

Créer un roue transparente avec CSS3 Play Ads

Comment implémenter une disposition de flux en cascade avec CSS3

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!