TOUCH Eventlistener lässt sich nicht löschen
bearbeitet von Felix RiestererLieber Dietrich,
Deine Handler-Funktion (functionTouchEnd) bekommt ein Event-Objekt übermittelt. Dieses kennt eine Eigenschaft `target`. Dabei handelt es sich um eine Referenz auf das HTML-Element, welches das Event ausgelöst hat. Daher mein Einzeiler, der sich an den Daten des Event-Objektes das "richtige" Element nimmt, um ihn den EventListener wieder wegzunehmen.
> Kommt es da zu Konflikten, wenn ich einem Array von Elementen mit einem `forEach()` die `EventListener` anfüge/entferne?
Nö.
> In eure Lösungen werden die Elemente ja nicht jeweils den Funktionen übergeben, sondern die Funktionen greifen auf ein außerhalb definiertes `Objekt1` zu.
Das war für "nur ein Element". Du willst mehrere. Daher dieser Code:
~~~ javascript
let functionTouch = (e) => {
e.preventDefault();
e.target.style.top = `${Objekt1.getBoundingClientRect().top + 10}px`;
};
let functionTouchEnd = (e) => {
e.preventDefault();
e.target.removeEventListener("touchstart", functionTouch);
/*
Nun sollte "touchstart" nicht mehr aktiv sein!
*/
};
~~~
> Touch kann aber anders als Click mehrere Objekte gleichzeitig betreffen, ==> Konflikte was `Objekt1` in den Funktionen angeht?
Na natürlich! Die Variable solltest Du in den Handlerfunktionen nicht verwenden, sondern abhängig vom auslösenden HTML-Elementobjekt arbeiten. Siehe `event.target`{:language-javascript}.
Liebe Grüße
Felix Riesterer