a:aktiv plus Animation klicken Sie auf ungültige Lösung

Wir stoßen oft auf ein Problem, ein:aktiver plus Animation-Klick ist ungültig. Heute zeige ich Ihnen meinen Code und meine Lösung und werde sie übrigens mit Ihnen teilen Methode, die den URL-Sprungverlauf nicht aufzeichnet.

ein Tag: aktiv plus Animationsklick ist ungültig

Mein CSS-Code lautet wie folgt:

.haorooms{  -webkit-animation: jpyd 1.5s cubic-bezier(0,.98,.44,1) both;  animation:  jpyd 1.5s cubic-bezier(0,.98,.44,1) both;}
.haorooms:active{ -webkit-animation: zoomOuts 1s ; animation: zoomOuts 1s; }

HTML-Code lautet wie folgt:

<a class="haorooms delay3 " href="/jingpin/"  ></a>

Auf Apple-Telefonen ist das Klicken auf das Tag „a“ ungültig. Nach der Überprüfung ist das Tag nicht blockiert. Was ist der Grund? Wie kann man es lösen?

Der Grund dafür ist, dass Active eine 1-sekündige Animation hat. Wenn Sie die Taste gedrückt halten, gibt es keine Möglichkeit zu springen.

ein Tag: aktiv plus Animation, klicken Sie auf ungültige Lösung

Tatsächlich gibt es viele Lösungen für dieses Problem, da wir es auf dem Mobiltelefon anzeigen und der erwartete Effekt darin besteht, hinterherzuspringen Die Animation endet. Wir können das Ereignis ontouchend hinzufügen und nach touchend zu einer Adresse springen.

ontouchend="window.location.href='/jingpin/'"

Nachdem Sie dies hinzugefügt haben, können Sie zur angegebenen Adresse springen, indem Sie sie gedrückt halten oder darauf klicken. Nachdem Sie auf das Ende gedrückt haben, können Sie zur angegebenen Adresse springen.

Der Seitensprungverlauf wird bei der Rückkehr nicht aufgezeichnet

Was das Speichern des Browserverlaufs betrifft, habe ich es in meinem vorherigen Artikel erwähnt: einige Einführungen in SPA-Webanwendungen mit einer einzigen Seite und Ajax-Seiten ohne Aktualisierung Umschalten, Verlauf Aufzeichnen Zurück Vorwärts Lösung

Wir können den Browserverlauf über

history.replaceState 
history.pushState(state, title, url)

bedienen.

In tatsächlichen Situationen gibt es jedoch auch Situationen, in denen wir den Browserverlauf nicht aufzeichnen müssen, zum Beispiel: „Es gibt zwei Tab-Wechselbezeichnungen auf einer Seite. Der Tab-Wechsel ändert die Browseradresse.“ Der Tab-Wechsel wird standardmäßig im Verlauf aufgezeichnet. Wenn wir also auf die Schaltfläche „Zurück“ klicken, wechseln wir ständig zwischen zwei Registerkarten. Eigentlich möchten wir jedoch zur vorherigen Seite zurückkehren und nicht zwischen zwei Registerkarten wechseln. Wie kann man diese Situation lösen?

Das haben wir uns überlegt

location.replace(newURL)

Die Methode „replace()“ generiert keinen neuen Datensatz im History-Objekt. Bei Verwendung dieser Methode überschreibt die neue URL den aktuellen Datensatz im History-Objekt.

Wir können den Code also wie folgt schreiben:

<ul id="haorooms">
  <li><a href="http://www.haorooms.com/archives">标签一</a></li>
  <li><a href="http://www.haorooms.com/tools/index">标签二</a></li>
</ul>
$(&#39;#haorooms li  a&#39;).on(&#39;click&#39;, function (event) { //tab中a标签点击
    event.preventDefault();
    location.replace(this.href);
})

Der obige Code gibt bei einigen Mobiltelefonen ungültig zurück, sodass die Lösung fehlschlägt!

History.replaceState()- und location.replace()-Methoden

Die obige Methode schlug fehl, also musste ich meine Meinung ändern, dass Meister Zhang Xinxu irgendwann eine ähnliche Falllösung hatte Vorher. Also habe ich daraus gelernt!

Die Lösung lautet wie folgt:

$('#haorooms li  a').on('click', function (event) {
    event.preventDefault();
    history.replaceState(null, document.title, this.href.split('#')[0] + '#');
    location.replace('');
})

Ersetzen Sie zunächst die aktuelle URL-Adresse durch die aktuelle Linkadresse, die mit einem Nummernzeichen # endet, über die HTML5-Methode „history.replaceState()“; >

Führen Sie location.replace('') ​​​​aus, um die aktuelle Adresse zu aktualisieren (# wird zu diesem Zeitpunkt ignoriert).

Mit dieser Lösung wird unabhängig davon, wie wir die Registerkarten wechseln, nachdem wir auf die Eingabetaste geklickt haben, Wir kehren wie gewohnt zur vorherigen Seite zurück. Kein Wechseln mehr zwischen Tabs!

Weil History.replaceState nur ab IE10 unterstützt wird, wenn Sie mit früheren Browsern kompatibel sein oder es auf dem PC verwenden möchten. Ich habe gesehen, dass Zhang Dashen auch eine Funktion gekapselt hat, also habe ich sie hier ausgeliehen:

var fnUrlReplace = function (eleLink) {
    if (!eleLink) {
        return;
    }
    var href = eleLink.href;
    if (href && /^#|javasc/.test(href) === false) {
        if (history.replaceState) {
            history.replaceState(null, document.title, href.split('#')[0] + '#');
            location.replace('');
        } else {
             location.replace(href);
        }
    }
};

Die obige Funktion kann wie folgt angewendet werden

$('#haorooms li  a').on('click', function (event) {
  if (event && event.preventDefault) {
      event.preventDefault();
   }
   fnUrlReplace(this);
   return false;
})

Ich glaube, Sie haben die Methode danach gemeistert Lesen Sie diese Fälle und mehr. Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

So schreiben Sie einen Bedingungs-Hack in CSS

CSS-Webseite Fehlausrichtung Wie man damit umgeht

Wie man mit CSS3 Textanimationen unter Lichtbeleuchtung erstellt

Das obige ist der detaillierte Inhalt vona:aktiv plus Animation klicken Sie auf ungültige Lösung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!