tag:forum.selfhtml.org,2005:/self removeEventListener funktioniert nicht mit Funktionsparametern – SELFHTML-Forum 2023-05-07T19:21:01Z https://forum.selfhtml.org/self/2023/may/05/removeeventlistener-funktioniert-nicht-mit-funktionsparametern/1808586#m1808586 Nico R. 2023-05-05T15:22:47Z 2023-05-05T15:22:47Z removeEventListener funktioniert nicht mit Funktionsparametern <p>Hallo,</p> <p>ich habe li-Elemente, die sich per "click" öffnen lassen. Das click-Event hänge ich per addEventListener an. Beim Öffnen gebe ich als Parameter diverse Informationen mit, die dann in view_person() angezeigt werden.</p> <pre><code class="block language-javascript"> <span class="token keyword">var</span> li <span class="token operator">=</span> liste_view_inc<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"li"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">click_view_person</span><span class="token punctuation">(</span><span class="token parameter">li</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">view_person</span><span class="token punctuation">(</span>li<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>id<span class="token punctuation">,</span> li<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>modus<span class="token punctuation">,</span> li<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>vorname<span class="token punctuation">,</span> li<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>nachname<span class="token punctuation">,</span> li<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>telefon<span class="token punctuation">,</span> li<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>email<span class="token punctuation">,</span> li<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>notiz<span class="token punctuation">,</span> li<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>anwesend<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> li<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">click_view_person</span><span class="token punctuation">(</span>li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das funktioniert auch. Nun gibt es noch einen weiteren Modus, der den Listeneintrag nicht öffnet, sondern auswählt. Dazu möchte ich das "click"-Event der li-Elemente entfernen und ein neues hinzufügen.</p> <pre><code class="block language-javascript">liste_nav_menue_ausw<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> li<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> click_view_person<span class="token punctuation">)</span><span class="token punctuation">;</span> li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">// select-Funktion</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Das funktioniert leider nicht. Die Funktion des zweiten Event-Listeners wird zugefügt, die erste bleibt aber ebenfalls erhalten. Das remove funktioniert nur, wenn ich eine test-Funktion ohne Parameter anhänge. Also so...</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> li <span class="token operator">=</span> liste_view_inc<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"li"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"test"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> li<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> test<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> liste_nav_menue_ausw<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> li<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> test<span class="token punctuation">)</span><span class="token punctuation">;</span> li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">// select-Funktion</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Gehe ich das grundsätzlich falsch an oder bin ich kurz vor der Lösung? Ich hab irgendwie gerade ein Brett vorm Kopf.</p> <p>Schöne Grüße</p> <p>Nico</p> https://forum.selfhtml.org/self/2023/may/05/removeeventlistener-funktioniert-nicht-mit-funktionsparametern/1808587#m1808587 Raketenwilli 2023-05-05T15:34:32Z 2023-05-05T15:39:44Z removeEventListener funktioniert nicht mit Funktionsparametern <p>Ah. Ich glaube da was zu sehen... Du notierst</p> <blockquote> <pre><code class="block language-javascript"> li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">click_view_person</span><span class="token punctuation">(</span>li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Aber dann:</p> <blockquote> <pre><code class="block language-javascript"> li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> click_view_person<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Tja. Das funktioniert so nicht. Du kannst nur den Event-Listener entfernen, den Du auch hinzugefügt hast. Mit der anonymen Funktion ist das „eher schwierig”.</p> https://forum.selfhtml.org/self/2023/may/05/removeeventlistener-funktioniert-nicht-mit-funktionsparametern/1808588#m1808588 Nico R. 2023-05-05T15:43:20Z 2023-05-05T16:09:15Z removeEventListener funktioniert nicht mit Funktionsparametern <p>Hallo Raketenwilli,</p> <p>das dacht ich mir auch schon. Ich hab ihn daher versucht so zu entfernen, wie ich ihn registriert habe:</p> <pre><code class="block language-javascript">li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">click_view_person</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">click_view_person</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Das funktioniert aber ebenfalls nicht. Und irgendwie fühlt sichs auch nicht richtig an.</p> <p>Schöne Grüße</p> <p>Nico</p> https://forum.selfhtml.org/self/2023/may/05/removeeventlistener-funktioniert-nicht-mit-funktionsparametern/1808589#m1808589 Rolf B 2023-05-05T16:22:14Z 2023-05-05T16:22:14Z removeEventListener funktioniert nicht mit Funktionsparametern <p>Hallo Nico R.,</p> <p>das Problem ist: Woher soll JavaScript wissen, dass die anonyme Funktion, die Du beim add übergibst, die gleiche ist wie die, die Du beim remove übergibst?</p> <p>Deswegen schrieb Jörg, dass dein Vorhaben mit anonymen Funktionen "eher schwierig" ist. Genauer gesagt: unmöglich.</p> <p>Leider bekommst Du von addEventListener kein "remove handle" oder sowas in der Art. Du hast darum nur eine Möglichkeit:</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">click_view_person</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// view me </span> <span class="token punctuation">}</span> element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>click_view_person<span class="token punctuation">)</span><span class="token punctuation">;</span> element<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span>click_view_person<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Jetzt ist's beide Male das gleiche Funktionsobjekt und der Remove wird funktionieren.</p> <blockquote> <p>Nun gibt es noch einen weiteren Modus, der den Listeneintrag nicht öffnet, sondern auswählt.</p> </blockquote> <p>Ist das ein Modus, der für die ganze Liste gilt? Oder nur für dieses Element?</p> <p>Je nach dem gib dem Listencontainer (ul, ol) oder dem li Element eine Klasse "selection-mode" oder ähnlich und frage im click-Handler ab, ob die Klasse vorhanden ist. Je nach Ergebnis machst Du view oder select.</p> <p>Umregistrieren von Eventhandlern sollte man eher unterlassen, das ist zu umständlich.</p> <h3>Und nun zu deiner wichtigsten Frage:</h3><blockquote> <p>Gehe ich das grundsätzlich falsch an</p> </blockquote> <h3>Ja.</h3><p><code>li</code> Elemente sind keine interaktiven Elemente. Eine Klick-Behandlung für <code>li</code> ist grundsätzlich falsch. Technisch geht es, aber technisch kann ich auch bei Tempo 200 den Zündschlüssel rausziehen und aus dem Fenster werfen. Oder eine Zigarette am Filterende anzünden. Kann man machen, wäre aber grundsätzlich falsch.</p> <p>Wenn Du auf einen Klick reagieren willst, brauchst Du interaktive Elemente wie <code>a</code> oder <code>button</code>. Da Du auch markieren können willst, riecht das nach einem Button. Dem kannst Du mit CSS alles wegnehmen, was ihn wie einen Button aussehen lässt. Aber dann stimmt die Semantik, und eine Tastaturbedienung wird möglich.</p> <p>Es ist auch umständlich, den Eventhandler auf jedem einzelnen <code>li</code> oder <code>button</code> zu registrieren. Kennst Du "Event Bubbling"? Du kannst den Handler auf dem Listencontainer <strong>einmal</strong> registrieren und die Events für alle Listenelemente dort behandeln. Das Event-Objekt, das Du im Eventhandler bekommst, hat zwei wichtige Eigenschaften:</p> <dl> <dt>currentTarget</dt> <dd>Wohin ist das Event gerade gebubbelt - sprich: das ist das Element, auf dem der Handler registriert ist</dd> <dt>target</dt> <dd>Wo wurde das Element ausgelöst - bei Maus- oder Touch-Bedienung das Element, über dem die Mausspitze war oder die Fingerspitze zugestoßen hat. Bei Tastaturbedienung zwangsläufig der Button selbst.</dd> </dl> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>liste<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erika Mustermann<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Otto Normalprogrammierer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Ada Lovelace<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-js"><span class="token keyword">const</span> liste <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#liste"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> liste<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> button <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">"button"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>button<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>liste<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">"selection-mode"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Selektiere Listeneintrag</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// Zeige Listeneintrag</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Die closest-Abfrage brauchst Du nur, wenn deine Buttons HTML Elemente enthalten. <code>event.target</code> liefert Dir das geclickte HTML Element - das könnte auch ein <strong> innerhalb des Buttons sein. Mit closest gehst Du die Elternkette hoch und suchst den Button heraus. Oder mit der parentElement Eigenschaft das li Element - je nach Bedarf.</p> <p>Wenn Du neben einen Button klickst, aber immer noch in den Bereich des ul Elements, würde die closest-Methode null liefern. Deshalb die Abfrage, ob ein Button gefunden wurde.</p> <p>In meinem Beispiel wäre dann auch gleich die Weiche für die Betriebsarten "Anzeigen" oder "Auswählen" drin. Denk dran, dass Du beim Auswählen ggf. Aria-Attribute setzen musst, damit Assistenztechniken damit klar kommen. Ich frag mich nur, welche. aria-checked oder aria-selected sind für die Rolle listitem nicht vorgesehen, und ob man deinen li eine andere Rolle geben sollte, weiß ich nicht so recht. <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a>, wie sollte man hier aria-mäßig vorgehen? Oder würdest Du die Selected-Eigenschaft der Listen durch eine visuell versteckte Checkbox implementieren? Käme mir eigentlich auch falsch vor, vor allem müsste die ja auch ggf. das Styling des li beeinflussen, in dem sie steckt (was heute mit :has() natürlich machbar wäre, aber ist das richtig so?)</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/may/05/removeeventlistener-funktioniert-nicht-mit-funktionsparametern/1808591#m1808591 Nico R. 2023-05-05T18:34:56Z 2023-05-05T18:34:56Z removeEventListener funktioniert nicht mit Funktionsparametern <p>Hallo Rolf,</p> <blockquote> <p>Deswegen schrieb Jörg, dass dein Vorhaben mit anonymen Funktionen "eher schwierig" ist. Genauer gesagt: unmöglich.</p> </blockquote> <p>Schade. Dann hatte ich wohl in das "eher schwierig" zu viel Hoffnung gepackt.</p> <blockquote> <p>Je nach dem gib dem Listencontainer (ul, ol) oder dem li Element eine Klasse "selection-mode" oder ähnlich und frage im click-Handler ab, ob die Klasse vorhanden ist. Je nach Ergebnis machst Du view oder select.</p> </blockquote> <p>Das ist ne sehr gute Idee. Ich könnte jedem Listen-Element beim Aufruf der Liste die Klasse "show" geben und diese beim Klick auf 'Auswählen' durch die Klasse "select" ersetzen und beim li-click abfragen, welche Klasse gesetzt ist. Zwischendurch hatte ich noch zwei andere Möglichkeiten gefunden...</p> <p><strong>Variante 1</strong>: Über das li-Element ein div-Element mit <strong>position:absolute</strong> und <strong>display:none;</strong> mit <input type="checkbox"> und eigenem addEventListener("click") legen und das dann bei 'Bearbeiten' einblenden.</p> <p><strong>Variante 2</strong>: Dem Listeneintrag ein <strong>onclick="show_li()"</strong> verpassen und nach Klick auf 'Auswählen' <strong>li[i].onclick = null</strong> setzen sowie li[i].addEventListener("click"). Funktioniert, ist aber wohl ziemlich schmutzig.</p> <p>Ich werd mal jetzt schauen, ob ich Rolfs Vorschlag oder Variante 1 umsetze und was es noch für Probleme gibt…</p> <blockquote> <p><code>li</code> Elemente sind keine interaktiven Elemente. Eine Klick-Behandlung für <code>li</code> ist grundsätzlich falsch... Wenn Du auf einen Klick reagieren willst, brauchst Du interaktive Elemente wie <code>a</code> oder <code>button</code>. Da Du auch markieren können willst, riecht das nach einem Button. Dem kannst Du mit CSS alles wegnehmen, was ihn wie einen Button aussehen lässt. Aber dann stimmt die Semantik, und eine Tastaturbedienung wird möglich.</p> </blockquote> <p>Es geht hier wieder rein um eine Anwendung für Mobilgeräte. Es handelt sich um eine Liste wie z.B. in einer E-Mail-App, wo beim Klick auf einen Listeneintrag die E-Mail angezeigt wird oder beim Klick auf "Bearbeiten" die Listeneinträge ausgewählt werden können, um sie z.B. zu löschen. Das mit Buttons im li-Element zu lösen wäre unübersichtlich und entspricht auch nicht mehr den Gewohnheiten der Nutzer.</p> <blockquote> <p>Es ist auch umständlich, den Eventhandler auf jedem einzelnen <code>li</code> oder <code>button</code> zu registrieren. Kennst Du "Event Bubbling"?</p> </blockquote> <p>Du hast recht. Ich habe das "Bubbling" erst kürzlich dazugelernt, in älteren Scripts habs ichs noch nicht eingesetzt. Es ist also eher ein Überbleibsel.</p> <blockquote> <p>In meinem Beispiel wäre dann auch gleich die Weiche für die Betriebsarten "Anzeigen" oder "Auswählen" drin. Denk dran, dass Du beim Auswählen ggf. Aria-Attribute setzen musst, damit Assistenztechniken damit klar kommen. Ich frag mich nur, welche. aria-checked oder aria-selected sind für die Rolle listitem nicht vorgesehen, und ob man deinen li eine andere Rolle geben sollte, weiß ich nicht so recht. <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a>, wie sollte man hier aria-mäßig vorgehen? Oder würdest Du die Selected-Eigenschaft der Listen durch eine visuell versteckte Checkbox implementieren? Käme mir eigentlich auch falsch vor, vor allem müsste die ja auch ggf. das Styling des li beeinflussen, in dem sie steckt (was heute mit :has() natürlich machbar wäre, aber ist das richtig so?)</p> </blockquote> <p>Tja, am Ende ist das li-Element hier sowohl Liste, als auch button, als auch checkbox. In meiner bisherigen Version ist es so, dass ich im 'Auswählen'-Modus im <strong><li></li></strong> ein <strong><input type="checkbox"></strong> einblende.</p> <p>Über role- oder aria-Attribute hab ich mir ehrlich gesagt keine Gedanken gemacht, weil es hier um einen sehr begrenzten Nutzerkreis geht, der definitiv ein Mobilgerät nutzt und mit 99,9%-er Wahrscheinlichkeit keinen Screenreader.</p> <p>Schöne Grüße</p> <p>Nico</p> https://forum.selfhtml.org/self/2023/may/05/removeeventlistener-funktioniert-nicht-mit-funktionsparametern/1808592#m1808592 Nico R. 2023-05-05T20:38:15Z 2023-05-05T20:38:15Z removeEventListener funktioniert nicht mit Funktionsparametern <blockquote> <p>Das ist ne sehr gute Idee. Ich könnte jedem Listen-Element beim Aufruf der Liste die Klasse "show" geben und diese beim Klick auf 'Auswählen' durch die Klasse "select" ersetzen und beim li-click abfragen, welche Klasse gesetzt ist... Ich werd mal jetzt schauen, ob ich Rolfs Vorschlag oder Variante 1 umsetze und was es noch für Probleme gibt…</p> </blockquote> <p>Update: Ich hab mich für Rolfs Vorschlag entschieden und es hat funktioniert (hier noch ohne Bubbling):</p> <pre><code class="block language-javascript"><span class="token comment">// click "Auswählen"</span> li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">"view"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"select"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">...</span> li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">"view"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// view...</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">"select"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// select...</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Die Idee mit dem removeEventListener war wirklich eine Sackgasse. Am Ende wars gar keine große Sache, aber manchmal braucht man einfach einen Stoß in die richtige Richtung.</p> <p>Danke und schöne Grüße</p> <p>Nico</p> https://forum.selfhtml.org/self/2023/may/05/removeeventlistener-funktioniert-nicht-mit-funktionsparametern/1808603#m1808603 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2023-05-06T16:00:20Z 2023-05-06T16:00:20Z removeEventListener funktioniert nicht mit Funktionsparametern <p>@@Nico R.</p> <blockquote> <blockquote> <p><code>li</code> Elemente sind keine interaktiven Elemente. Eine Klick-Behandlung für <code>li</code> ist grundsätzlich falsch... Wenn Du auf einen Klick reagieren willst, brauchst Du interaktive Elemente wie <code>a</code> oder <code>button</code>.</p> </blockquote> <p>Es geht hier wieder rein um eine Anwendung für Mobilgeräte.</p> </blockquote> <p>Das ist kein Grund, die HTML-Spezifikation zu missachten.</p> <blockquote> <p>Es handelt sich um eine Liste wie z.B. in einer E-Mail-App, wo beim Klick auf einen Listeneintrag die E-Mail angezeigt wird oder beim Klick auf "Bearbeiten" die Listeneinträge ausgewählt werden können, um sie z.B. zu löschen. Das mit Buttons im li-Element zu lösen wäre unübersichtlich</p> </blockquote> <p>Das halte ich für Quatsch. Und wenn, dann ist das <em>dein</em> Problem, welches du nicht auf die Nutzer abwälzen solltest.</p> <blockquote> <p>und entspricht auch nicht mehr den Gewohnheiten der Nutzer.</p> </blockquote> <p>Das halte ich für Quatsch.</p> <blockquote> <p>Über role- oder aria-Attribute hab ich mir ehrlich gesagt keine Gedanken gemacht, weil es hier um einen sehr begrenzten Nutzerkreis geht, der definitiv ein Mobilgerät nutzt und mit 99,9%-er Wahrscheinlichkeit keinen Screenreader.</p> </blockquote> <p><a href="https://de.wikipedia.org/wiki/Survivorship_Bias" lang="en" rel="nofollow noopener noreferrer">Survivorship Bias</a>. Genausogut könntest du von einer Website, die nur mit JavaScript funktioniert, behaupten, dass bei 99.9% der Nutzerschaft JavaScript ausgeführt wird.</p> <p>Und <a href="https://de.wikipedia.org/wiki/Ableismus" rel="nofollow noopener noreferrer">Ableismus</a>.</p> <ul> <li><a href="https://www.24a11y.com/2018/how-ableism-leads-to-inaccessibility/" lang="en" rel="nofollow noopener noreferrer">How Ableism Leads to Inaccessibility</a></li> <li><a href="https://disabilitythinking.com/disabilitythinking/2014/04/there-is-strain-of-conventional-wisdom.html?rq=Asshole%20ableism" lang="en" rel="nofollow noopener noreferrer">Asshole Ableism</a></li> </ul> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="cs">„Ukončete, prosím, výstup a nástup, dveře se zavírají.“</em> </div> https://forum.selfhtml.org/self/2023/may/05/removeeventlistener-funktioniert-nicht-mit-funktionsparametern/1808604#m1808604 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2023-05-06T16:03:14Z 2023-05-06T16:04:18Z removeEventListener funktioniert nicht mit Funktionsparametern <p>@@Nico R.</p> <blockquote> <p>Update: Ich hab mich für Rolfs Vorschlag entschieden und es hat funktioniert</p> </blockquote> <p>Rolf hat dir sehr deutlich zu verstehen gegeben, dass <code class="language-js bad">li<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> …<span class="token punctuation">)</span></code> <em>nicht</em> funktioniert.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="cs">„Ukončete, prosím, výstup a nástup, dveře se zavírají.“</em> </div> https://forum.selfhtml.org/self/2023/may/05/removeeventlistener-funktioniert-nicht-mit-funktionsparametern/1808621#m1808621 Rolf B 2023-05-06T22:12:50Z 2023-05-06T22:12:50Z removeEventListener funktioniert nicht mit Funktionsparametern <p>Hallo Gunnar,</p> <p>es gibt durchaus Anwendungsfälle, bei denen klar ist, auf welchen Geräten die Seite läuft. Du solltest Nico zugestehen, seine Anwender zu kennen, wenn er von einem sehr begrenzten Nutzerkreis spricht.</p> <p>Beispielsweise wird die Handy-App, mit der die Schaffner in der Bahn neuerdings zum Kontrollieren rumlaufen, nie auf einem Desktop oder Laptop laufen. Außer vielleicht zu Testzwecken beim Entwickler.</p> <p>Eine Intranet-Webseite, mit der man durch's Lager läuft und Inventur macht, dürfte auch sehr handylastig sein.</p> <p>Das zum Anlass für einen Ableismus-Rant zu wählen ist auch eine Form von Ableismus, gelle?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2023/may/05/removeeventlistener-funktioniert-nicht-mit-funktionsparametern/1808651#m1808651 Nico R. 2023-05-07T19:21:01Z 2023-05-07T19:21:01Z removeEventListener funktioniert nicht mit Funktionsparametern <p>Guten Abend,</p> <blockquote> <p>Das ist kein Grund, die HTML-Spezifikation zu missachten.</p> </blockquote> <p>Es gibt, wenn ich in einer 30er-Zone mit 31 km/h geblitzt werde, auch keinen Grund, mir vorzuwerfen, ich würde rasen. Ich habe keine Tabelle zum layouten verwendet, keine div-Suppe gekocht und auch keine Katzenbabys gegen die Wand geworfen.</p> <p>In einem "vorschriftsmäßigen" Aufbau:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> </code></pre> <p>habe ich lediglich innerhalb des <li>-Elementes auf ein weiteres a- oder button-Element verzichtet. Ich sehe aber ein, dass hieraus in der Tat nicht ersichtlich wird, dass die Listenelemente interaktiv sind.</p> <p>Daher habe habe ich jetzt für den Standardmodus dem <li>-Element das Attribut <strong>role="link"</strong> gegeben. Sobald ich in den Auswahlmodus wechsle, tausche ich das gegen <strong>role="checkbox"</strong> aus und füge, wenn checked, noch <strong>aria-checked</strong> hinzu. Das triffts für mein Gefühl noch besser, als <a> oder <button>, da das <li> hier wirklich seine Rolle wechselt.</p> <blockquote> <p>Und <a href="https://de.wikipedia.org/wiki/Ableismus" rel="nofollow noopener noreferrer">Ableismus</a>.</p> <ul> <li><a href="https://www.24a11y.com/2018/how-ableism-leads-to-inaccessibility/" lang="en" rel="nofollow noopener noreferrer">How Ableism Leads to Inaccessibility</a></li> <li><a href="https://disabilitythinking.com/disabilitythinking/2014/04/there-is-strain-of-conventional-wisdom.html?rq=Asshole%20ableism" lang="en" rel="nofollow noopener noreferrer">Asshole Ableism</a></li> </ul> </blockquote> <p>Das ist ziemlich starker Tobak.</p> <p>Nun, es ist so, dass die Arbeit, die die Anwendung hoffentlich einmal übernehmen/unterstützen/erleichtern wird, zur Zeit noch mit Stift und Zettel betrieben wird und von blinden Personen definitiv nicht ausgeübt werden kann. Deshalb war ich für meine Anwendung ebenfalls von dieser Situation ausgegangen. Aber vielleicht führt ja in diesem Fall die Digitalisierung dazu, dass in Zukunft auch Sehbehinderte den Job ausüben können.</p> <p>Insofern ist der Einwurf gar nicht verkehrt gewesen. Aber die Art und Weise... Naja, vielleicht Geschmackssache.</p> <p>Danke nochmal und einen schönen Abend</p> <p>Nico</p> https://forum.selfhtml.org/self/2023/may/05/removeeventlistener-funktioniert-nicht-mit-funktionsparametern/1808626#m1808626 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2023-05-07T05:00:20Z 2023-05-07T05:00:20Z removeEventListener funktioniert nicht mit Funktionsparametern <p>@@Rolf B</p> <blockquote> <p>es gibt durchaus Anwendungsfälle, bei denen klar ist, auf welchen Geräten die Seite läuft.</p> </blockquote> <p>Was nichts damit zu tun hat, ob ein Nutzer auf assistive Technologie angewiesen ist.</p> <blockquote> <p>Du solltest Nico zugestehen, seine Anwender zu kennen, wenn er von einem sehr begrenzten Nutzerkreis spricht.</p> </blockquote> <p>Auch jemand aus einem sehr begrenzten Nutzerkreis, der heute nicht auf assistive Technologie angewiesen ist, kann es morgen durch Unfall oder Krankheit sein.</p> <p>Oder der Nutzerkreis soll um eine Person erweitert werden. Geht aber nicht, weil diese Person auf assistive Technologie angewiesen ist und der Entwickler der Anwendung zu uneinsichtig war.</p> <p><em>„Scher dich weg! Krüppel können wir hier nicht gebrauchen!“</em></p> <p>Und jemand, der es bei einem Projekt falsch macht, wird es auch bei anderen Projekten falsch machen.</p> <p lang="uk"> Живіть довго і процвітайте</p> <div class="signature">-- <br> <em lang="cs">„Ukončete, prosím, výstup a nástup, dveře se zavírají.“</em> </div>