Метка с привязкой вызывает конфликтующие события ⇐ Html

[Anonymous]

Я не знаю, является ли это ожидаемым поведением и есть ли способ обойти это. В образовательных целях я использую цели CSS для динамического отображения содержимого и скрытый флажок для динамического отображения диалогового окна.
Когда я показываю свое диалоговое окно, я показываю список привязок, содержащих фрагменты, которые использует мой CSS. Если я показываю список только как привязки, мое диалоговое окно не закрывается. Поэтому я попробовал добавить метку с атрибутом for, установленным вместе с моей привязкой.
Я обнаружил, что родительский элемент определяет, какое поведение будет выполнять браузер. Например, если родительский элемент является привязкой, то он переключит флажок, но если родительский элемент является меткой, он установит фрагмент URL-адреса (минимальный пример ниже):

Код: Выделить всё

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

Код: Выделить всё

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

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

Мой вопрос: как я могу изменить фрагмент и переключить флажок одним щелчком мыши?
Обновить
После ответа Эли Г. я понял, что не упомянул об этом в своем исходном вопросе, но хочу добиться этого без использования JavaScript. Другими словами, я хочу предположить, что JavaScript полностью отключен.

Подробнее здесь: https://stackoverflow.com/questions/797 ... ing-events