5 Möglichkeiten, 'Nur einen Klick' in Javascript zuzulassen - Anfängerleitfaden

Blog

5 Möglichkeiten, 'Nur einen Klick' in Javascript zuzulassen - Anfängerleitfaden

5 Möglichkeiten, 'Nur einen Klick' in Javascript zuzulassen - Anfängerleitfaden

EINLEITUNG

Willkommen zu einem Anfänger-Tutorial zum Erlauben von nur einem Klick in Javascript. Sie haben also eine Schaltfläche oder ein Element mit der Aufschrift Klicken Sie hier, um etwas zu tun, möchten jedoch verhindern, dass der Benutzer mehrmals darauf klickt. Nun, es gibt tatsächlich eine Reihe von Möglichkeiten, diesen Ein-Klick-Schutz zu implementieren:

  • Deaktivieren Sie die Schaltfläche, nachdem der Benutzer darauf geklickt hat.
  • Verwenden Sie ein Flag, um anzuzeigen, dass die Verarbeitung jetzt erfolgt, verarbeiten Sie es nicht, wenn dieses Flag aktiviert ist
  • Entfernen Sie das On-Click-Attribut.
  • Hängen Sie einen On-Click-Ereignis-Listener an und trennen Sie ihn nach dem Klicken.
  • Die unorthodoxe Methode – Ändern Sie die Handhabung der On-Click-Funktion.

SCHNELLE HINWEISE

Es gibt nichts zu installieren, also einfach herunterladen und in einen Ordner entpacken. Wenn Sie einen Fehler entdecken, können Sie ihn unten kommentieren.

EIN-KLICK-SCHUTZ

Kommen wir nun zu den Mechanismen, die wir für den Ein-Klick-Schutz einrichten können.

1. DEAKTIVIEREN DER TASTE

Disable Button function doSomething () { // Disable the button document.getElementById('myButton').disabled = true; // Do your processing here alert('Something is done!'); // Re-enable after processing if you want // document.getElementById('myButton').disabled = false; }

So einfach ist das, wir deaktivieren den Button manuell mit |_+_| wenn es angeklickt wird. Aber ja, beachte, dass dies nur funktioniertTasten:

  • document.getElementById('myButton').disabled = true

2. SCHUTZFLAGGE

Was also, wenn wir nicht mit Schaltflächen arbeiten? Dies ist einer der möglichen Mechanismen:

  • Zuerst erstellen wir ein Schutzflag |_+_|.
  • Dann in unserem |_+_| Behandlungsfunktion werden wir nur mit |_+_| fortfahren.
  • Sollte jetzt Captain Obvious sein – Wir werden |_+_| . setzen um die Verarbeitung weiterer Klicks zu verhindern.

3. ON-CLICK-ATTRIBUT ENTFERNEN

Protection Flag // Flag for 'now processing' or 'already clicked'. var clicked = false; function doSomething () { // Will only start if clicked is false if (!clicked) { // Set clicked to true clicked = true; // Do your processing here alert('Something is done!'); // Re-enable after processing if you want // clicked = false; } } Click Here To Do Something

Das obige ist eigentlich nicht die bevorzugte orthodoxe Methode, diese ist es. Wir entfernen einfach den On-Click aus dem Element mit einem Einzeiler |_+_|.

4. EVENT-HÖRER ANBRINGEN UND ABNEHMEN

var clicked = false

Dies mag jetzt etwas langatmiger erscheinen, aber es wird auf lange Sicht sinnvoll sein, wenn Sie mehr über Ereignis-Listener und die Reihenfolge erfahren, in der die Skripte und Elemente geladen werden. Ich werde dir das jetzt nicht ins Gesicht schieben, aber wisse einfach, dass es etwas namens |_+_| . gibt und |_+_|.

5. UNORDHODOXER FUNKTIONSSCHALTER

onclick

Bei dieser letzten Methode handelt es sich nicht wirklich um einen Ein-Klick-Schutz, sondern um das Umschalten auf etwas anderes nach dem ersten Klick.

  • Erstellen Sie Ihre erste Funktion |_+_| – Dieser wird Ihre hauptsächlich beabsichtigte Verarbeitung durchführen.
  • Erstellen Sie Ihre zweite Funktion |_+_| – Dies kann eine einfache Nachricht sein, die jetzt verarbeitet wird, oder ein Osterei, um den Benutzer zu erschrecken.
  • Erstellen Sie dann eine Variable, zeigen Sie sie auf die erste Funktion |_+_|.
  • Wechseln Sie in der ersten Zeile von |_+_| |_+_|.
  • Das ist alles. Zum Schluss zeigen Sie einfach auf die |_+_| der Schaltfläche auf |_+_|.

WELCHES IST DAS BESTE?

Das ist alles für dieses kurze Tutorial, und hier ist ein kleiner Abschnitt mit einigen Extras und Links, die für Sie nützlich sein können.

Alle oben genannten Methoden funktionieren einwandfrei, je nachdem, was Ihren Anforderungen entspricht. Aber wenn Sie diesen Ein-Klick-Schutz verwenden, um Dinge wie Mehrfachregistrierungen zu verhindern. Bitte denken Sie daran, auch serverseitig zu prüfen, ob der angegebene Benutzername oder die E-Mail-Adresse bereits registriert ist.

Danke fürs Lesen! Ich hoffe, dieses Tutorial wird Ihnen sicherlich helfen, und wenn Ihnen dieses Tutorial gefallen hat, ziehen Sie es in Betracht, es mit anderen zu teilen.

#Javascript #Tutorial #Programmierung #Entwickler