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

Cet article présente principalement les événements de pointeur CSS3. L'éditeur pense que c'est plutôt bien, je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

Que sont les événements de pointeur ?

Comme son nom l'indique, pointer-events est un attribut utilisé 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 :

Copier le code

Le le code est le suivant :

événements de pointeur : auto | aucun | visiblefill | visiblefill visible | auto | none , 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. Activez/désactivez l'état du 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>

Lorsque vous cliquez sur le bouton Soumettre, afin d'empêcher l'utilisateur de cliquer sur le bouton tout le temps. l'heure, envoyez une requête. Lorsque la requête Avant de renvoyer le résultat, ajoutez pointer-events: none au bouton pour éviter cette situation. Cette situation 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)
         // ...
     });
 }

Certaines zones d'affichage de contenu, afin d'obtenir de bons résultats. en regardant les effets CSS, lorsqu'il y a d'autres éléments couvrant l'élément ci-dessus, afin de ne pas affecter les événements des éléments ci-dessous, l'ajout de pointer-events: none à l'élément couvert peut résoudre le problème.

compatibilité poninter-events

<!--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>

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!