Detaillierte Erläuterung der Verwendung von CSS3-Zeigerereignissen

Dieser Artikel stellt hauptsächlich CSS3-Zeigerereignisse vor. Der Herausgeber findet ihn ziemlich gut. Jetzt werde ich ihn mit Ihnen teilen und als Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf

Was sind Zeigerereignisse?

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

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

Der Standardwert ist auto, Syntax:

Code kopieren

Der Code ist wie folgt:

Zeigerereignisse: sichtbarer Strich | auto |. none attribute , es ist zu beachten, dass andere Attribute nur auf SVG-Elemente anwendbar sind.

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 Ein-/Aus-Schaltflächenstatus um

Wenn Sie auf die Schaltfläche „Senden“ klicken, um zu verhindern, dass der Benutzer auf die Schaltfläche klickt Senden Sie zu diesem Zeitpunkt eine Anfrage, bevor Sie das Ergebnis zurückgeben. Fügen Sie der Schaltfläche pointer-events: none hinzu, um diese Situation zu verhindern.

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

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

Einige Inhaltsanzeigebereiche, um einige gute Ergebnisse zu erzielen. Wenn es andere Elemente gibt, die das obige Element abdecken, kann das Problem durch Hinzufügen von pointer-events: none zum abgedeckten Element gelöst werden, um die Ereignisse der folgenden Elemente nicht zu beeinträchtigen.

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

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