Wie kann ich einer Funktion ein Ereignis für einen einmaligen Klick hinzufügen?
Lesezeit: 3 Minuten
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?
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.
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
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");
});
var el = document.getElementById('something');
el.addEventListener('click', doSomething);
function doSomething() {
el.removeEventListener('click', doSomething);
//code
}
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);
10152200cookie-checkWie kann ich einer Funktion ein Ereignis für einen einmaligen Klick hinzufügen?yes
@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 einif
wenn es das erste Mal ist, und wenn es tatsächlich das erste Mal ist, ändern Sie es intrue
?– Gabriel Tomitsuka
19. Februar 2015 um 15:38 Uhr