Label mit Anker führt zu widersprüchlichen Ereignissen ⇐ HTML

[Anonymous]

Ich weiß nicht, ob dies ein erwartetes Verhalten ist und ob es einen Ausweg gibt. Zu Bildungszwecken verwende ich CSS-Ziele, um Inhalte dynamisch anzuzeigen, und ein ausgeblendetes Kontrollkästchen, um einen Dialog dynamisch anzuzeigen.
Wenn ich meinen Dialog zeige, zeige ich eine Liste von Ankern mit den Fragmenten, die mein CSS verwendet. Wenn ich die Liste nur als Anker anzeige, wird mein Dialog nicht geschlossen. Also habe ich versucht, eine Beschriftung mit dem for-Attribut hinzuzufügen, das mit meinem Anker festgelegt wurde.
Was ich herausgefunden habe, ist, dass das übergeordnete Element bestimmt, welches Verhalten der Browser annimmt. Wenn das übergeordnete Element beispielsweise der Anker ist, wird das Kontrollkästchen aktiviert, wenn das übergeordnete Element jedoch die Beschriftung ist, wird das URL-Fragment festgelegt (Minimalbeispiel unten):

Code: Select all

window.addEventListener('hashchange', () => console.log(window.location.href));

Code: Select all

[url=#target1]label wraps anchor (#target1)[/url]
[url=#target2]label wraps anchor (#target2)[/url]

[url=#target]anchor wraps label[/url]

Meine Frage ist, wie ich mit einem einzigen Klick sowohl das Fragment ändern als auch das Kontrollkästchen umschalten kann?