Wie kann ich einer Funktion ein Ereignis für einen einmaligen Klick hinzufügen?

Lesezeit: 3 Minuten

Benutzer-Avatar
Adam Piper

Ich möchte einer Funktion einen Click-Event-Listener hinzufügen, möchte aber, dass dies nur einmal geschieht. Wie könnte ich das tun?

Ich möchte mich auch von JQuery fernhalten, wenn es bitte möglich ist.

BEARBEITET

Da die Antworten, die ich dafür bekomme, mein Bedürfnis voll und ganz befriedigen, dachte ich, ich könnte es mit dem Kontext etwas klarer machen.

Ich schreibe eine Funktion, um ein Rechteck zu zeichnen, zuerst mit einem Klick auf eine Schaltfläche, um die Rechteckfunktion zu starten. Dann gibt es zwei Click-Ereignis-Listener in der Funktion drawRectangle. Dies sind die Ereignisse, die ich nur einmal in der Funktion haben möchte. Ermöglichen, dass der Benutzer dann ein weiteres Rechteck erstellt, wenn er erneut auf die Rechteck-Initiierungsschaltfläche klickt.

  • @antyrat OP hat ausdrücklich um kein jQuery gebeten.

    – ssube

    19. Februar 2015 um 15:36 Uhr

  • Würde keinen booleschen Wert setzen false beim Start und dann ein if wenn es das erste Mal ist, und wenn es tatsächlich das erste Mal ist, ändern Sie es in true?

    – Gabriel Tomitsuka

    19. Februar 2015 um 15:38 Uhr

Benutzer-Avatar
Gibolt

Verwenden Sie modernes JavaScript!

EventTarget.addEventListener("click", function() {

    // Do something cool

}, {once : true});

Ein boolescher Wert, der angibt, dass der Listener höchstens einmal aufgerufen werden sollte, nachdem er hinzugefügt wurde. Wenn truewird der Listener beim Aufruf automatisch entfernt.

MDN-Webdokumentation

Alle modernen Browser unterstützt diese Funktion

Andere Referenz

  • Kann für die meisten Produktionsstandorte immer noch nicht verwendet werden, da es keine IE11-Unterstützung bietet. Aber wirklich sehr schön!

    – emil. c

    2. Februar 2018 um 8:43 Uhr

  • + eins. Tolle Neuigkeiten, keine Notwendigkeit, eine Funktion zu deklarieren! Vielen Dank.

    – Iwan

    23. Juni 2018 um 14:49 Uhr


  • Groß! Sehr einfache Verwendung.

    – jnbm

    11. Dezember 2021 um 16:12 Uhr


Benutzer-Avatar
Florian Margaine

Sie müssen verwenden removeEventListener sobald das Ereignis einmal ausgelöst wird. Jedoch, removeEventListener nimmt eine Funktion als Argument, was bedeutet, dass Sie eine benannte Funktion deklarieren müssen, fügen Sie sie mit hinzu addEventListener, und lassen Sie es sich selbst entfernen. Beispiel:

function foo() {
    // do things, then
    removeEventListener('click', foo);
}

addEventListener('click', foo);

  • Ich habe das anfangs auch vergessen, aber removeEventListener benötigt auch den Ereignistyp: removeEventListener("click", foo);

    – CodingIntrige

    19. Februar 2015 um 15:41 Uhr

  • warte warte, removeEventListener und addEventListener Beide Methoden funktionieren nicht!

    – Iwan

    23. Juni 2018 um 14:40 Uhr

  • Dies ist eine veraltete Lösung. Siehe stackoverflow.com/a/46291530/2826713

    – amatyas001

    10. Mai 2021 um 18:42 Uhr


function one(el, type, fn) {
    function handler(event) {
        el.removeEventListener(type, handler);
        fn(event);
    }
    el.addEventListener(type, handler);
}

// use it like
one(window, 'resize', function () {
    alert("This triggers just once");
});

Beispiel: http://jsfiddle.net/6njpem7x/

Kombination von addEventListener und EventListener entfernen:

element.addEventListener("click", clickFunction);
function clickFunction(e) {
    console.log("clicked");
    element.removeEventListener("click", clickFunction);
}

jsFiddle

etwas wie das

var el = document.getElementById('something');
el.addEventListener('click', doSomething);

function doSomething() {
  el.removeEventListener('click', doSomething);

  //code
}

Benutzer-Avatar
Felix Klinge

Die anderen Antworten sind insofern richtig, als dies mit einer benannten Funktion erreicht werden kann, aber Sie müssen die Funktion nicht separat deklarieren. Sie können eine verwenden benannter Funktionsausdruck:

element.addEventListener("click", function handler(event) {
  this.removeEventListener("click", handler);
  // ...
});

Ein alternativer, wenn auch weniger optimaler Ansatz besteht darin, eine Variable beizubehalten, die verfolgt, ob der Handler ausgeführt wurde:

var wasExecuted = false;
element.addEventListener("click", function(event) {
  if (wasExecuted) {
    return;
  }
  wasExecuted = true;
  // ...
});

Die Variable muss außerhalb des Handlers, aber innerhalb des Geltungsbereichs deklariert werden, damit ihr Wert über Ereignisauslöser hinweg bestehen bleibt.

Innerhalb des Ereignishandlers können Sie universell verwenden: e.target.removeEventListener(e.type, arguments.callee)

Oder Sie können eine spezielle Funktion zum Erstellen von “einmaligen” Ereignis-Listenern erstellen:

function oneTimeListener(node, type, callback) {
    // create event
    node.addEventListener(type, function(e) {
        // remove event listener
        e.target.removeEventListener(e.type, arguments.callee);
        // call handler with original context 
        // as it happens with native addEventListener
        return callback.call(this, e); 
    });
}

oneTimeListener(document.getElementById("myElement"), "click", myHandler);

1015220cookie-checkWie kann ich einer Funktion ein Ereignis für einen einmaligen Klick hinzufügen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy