removeEventListener funktioniert nicht mit Funktionsparametern

[Nico R.]

Hallo Rolf,

Deswegen schrieb Jörg, dass dein Vorhaben mit anonymen Funktionen "eher schwierig" ist. Genauer gesagt: unmöglich.

Schade. Dann hatte ich wohl in das "eher schwierig" zu viel Hoffnung gepackt.

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.

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...

Variante 1: Über das li-Element ein div-Element mit position:absolute und display:none; mit <input type="checkbox"> und eigenem addEventListener("click") legen und das dann bei 'Bearbeiten' einblenden.

Variante 2: Dem Listeneintrag ein onclick="show_li()" verpassen und nach Klick auf 'Auswählen' li[i].onclick = null setzen sowie li[i].addEventListener("click"). Funktioniert, ist aber wohl ziemlich schmutzig.

Ich werd mal jetzt schauen, ob ich Rolfs Vorschlag oder Variante 1 umsetze und was es noch für Probleme gibt…

li Elemente sind keine interaktiven Elemente. Eine Klick-Behandlung für li ist grundsätzlich falsch... Wenn Du auf einen Klick reagieren willst, brauchst Du interaktive Elemente wie a oder button. 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.

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.

Es ist auch umständlich, den Eventhandler auf jedem einzelnen li oder button zu registrieren. Kennst Du "Event Bubbling"?

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.

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. @Gunnar Bittersmann, 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?)

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 <li></li> ein <input type="checkbox"> einblende.

Ü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.

Schöne Grüße

Nico