Detaillierte Erklärung der Verwendung von Zeigerereignissen in CSS3

Dieses Mal werde ich Ihnen eine detaillierte Erklärung zur Verwendung von CSS3-Zeigerereignissen geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von CSS3-Zeigerereignissen?

Was sind Zeigerereignisse?

Wie der Name schon sagt, handelt es sich bei pointer-events um ein Attribut für HTML-Zeigerereignisse.

Zeigerereignisse können Hover/Fokus/Aktiv und andere dynamische Effekte von HTML-Elementen deaktivieren.

Der Standardwert ist:

VisibleFill | us Häufig verwendete auto |. Keine Attribute. Es ist zu beachten, dass andere Attribute nur für SVG-Elemente gelten.

auto: Zeigerereignisse können verwendet werden.

keine: Zeigerereignisse deaktivieren. Es ist zu beachten, dass das Ereignis während der Zeit-Bubbling-/Erfassungsphase auf seinen untergeordneten/übergeordneten Elementen ausgelöst wird.

Häufige Szenarien

1. Deaktivieren Sie einen Label-Ereigniseffekt

Beim Tab-Wechsel wird das Ereignis des aktuellen Elements ausgewählt Label ist deaktiviert, nur beim Wechsel zu anderen Tabs werden erneut neue Daten abgefragt.

2. Schalten Sie den Status der

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

-Schaltfläche ein/aus

, um zu verhindern, dass der Benutzer auf die Schaltfläche „Senden“ klickt Wenn die Anfrage kein Ergebnis zurückgibt, fügen Sie der Schaltfläche pointer-events: none hinzu, um diese Situation zu verhindern, die auch im Geschäftsleben sehr häufig vorkommt.

3. Verhindern Sie, dass sich transparente Elemente und anklickbare Elemente überlappen und nicht anklickbar sind.

Um einige schöne CSS-Effekte im Anzeigebereich einiger Inhalte zu erzielen, Wenn über dem Element andere Elemente vorhanden sind, können Ereignisse, die sich nicht auf die darunter liegenden Elemente auswirken, durch Hinzufügen von pointer-events: none zu den abgedeckten Elementen gelöst werden.

<!--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)
         // ...
     });
 }

poninter-events-Kompatibilität

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Kommen Sie für weitere spannende Informationen. Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der Pseudoelemente::before und::after

Erstellen Sie ein Seamless Wheel mit CSS3 Play-Anzeigen

So implementieren Sie das Wasserfall-Flow-Layout mit CSS3

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Verwendung von Zeigerereignissen in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!