События FireFox не всплывают и не распространяются из теневого в светлый DOM

РЕДАКТИРОВАТЬ 4

Хорошо, я надеюсь, что эта дополнительная информация закрепит это.

Firefox ДЕЙСТВИТЕЛЬНО всплывает синтетический ЩЕЛЧОК, который я генерирую на ПРОБЕЛ / ВВОД, но НЕ ВЫПУСКАЕТ ЩЕЛЧОК мыши.

CHROME, OPERA и EDGE работают должным образом. (оба события всплывающие)

Все браузеры отображают события INPUT как для мыши, так и для синтетических щелчков.

Оба события являются СОСТАВЛЕННЫМИ, ОТМЕНЯЕМЫМИ и ПУЗЫРЬКИМИ.

Единственное отличие, которое я заметил, заключается в том, что для синтетического события CLICK для TARGET установлено значение ABC-TOGGLE#myToggle, тогда как TARGET для CLICK мыши по-прежнему является входным флажком.

Примечание. Я понимаю, что ПРОБЕЛ обычно является событием CLICK первого класса для флажков, но у меня есть stopPropagation() для единообразия с CR.

Почему ЩЕЛЧКИ мыши не пересекают DOM?

КОНЕЦ РЕДАКТИРОВАНИЯ 4

РЕДАКТИРОВАТЬ 3

Хорошо, я идиот! Никогда не знал, что пробел — это внутренний щелчок :-(

КОНЕЦ РЕДАКТИРОВАНИЯ 3

РЕДАКТИРОВАТЬ 2

Дополнительная информация: Chrome запускает событие Click и событие ввода в указанном порядке. Firefox соглашается с событием пробела/синтеза, но не отображает щелчок по светлому DOM при щелчке мыши.

Это теперь работает для FireFox и Chrome, как для TickBox, так и для Toggle. Но функция SpaceBar CarrriageReturn не работает. Все еще на этом.

КОНЕЦ РЕДАКТИРОВАНИЯ 2

РЕДАКТИРОВАТЬ 1

Firefox действительно передает событие в легкий DOM, но это событие INPUT; не событие CLICK. Почему?

КОНЕЦ РЕДАКТИРОВАНИЯ 1

В документации говорится, что события, вызванные элементами в теневом DOM, которые составляют веб-компонент, должны передаваться из теневого в светлый DOM, при этом цель, currentTarget, originalTarget и др. объединяются в теги веб-компонента, идентификатор и т. д.

В этом примере с FireFox этого не происходит

в test_toggle.html я хочу получать уведомления о событии «щелчок» в моем флажке «disTick», чтобы я мог отключить переключатель: -

            document.getElementById("disTick").addEventListener("click", (e) => {
                            if (e.target.checked)
                                myToggle.disabled=true;
                            else
                                myToggle.disabled=false;
                        });
                        
            document.body.addEventListener("change", (e) => {console.info("****"+e.target.tagName);});

Он вызывается в Chrome, Edge, Opera, но не в FireFox.

(Я пытался перехватывать события щелчка, ввода и изменения на BODY, но ничего не всплывало.)

Как ни странно, мое синтетическое событие всплывает (из toggle.js).

    this.#toggle.addEventListener('keyup', (e) => {
            if (e.altKey || e.ctrlKey || e.isComposing || e.metaKey || e.shiftKey)
                return;
            
            if (e.keyCode == 32 || e.keyCode == 13)
            {
                console.info("key = " + e.keyCode);
                e.preventDefault();
                this.#toggle.click();   
            }
        });

Чего мне не хватает / Почему исходный клик не отображается в светлом DOM в FireFox?

Добро пожаловать в StackOverflow, надеюсь, вы найдете здесь новые знания. Вы можете помочь нам ответить на ваш вопрос, добавив фрагмент StackOverflow с минимальным воспроизводимым примером. Это поможет читателям выполнить ваш код одним щелчком мыши. И помогите создавать ответы одним щелчком мыши. Спасибо.

Danny '365CSI' Engelman 11.03.2024 09:37

См. консоль F12 на сайте toggle-switch.github.io Я попытался провести рефакторинг вашего кода, чтобы упростить создание DOM и обработку событий. Я не понимаю подробностей обработки вашего атрибута, похоже, много шаблонов для изменения атрибута HTH.

Danny '365CSI' Engelman 11.03.2024 14:08

Посмотрите разницу консолей Chromium и FireFox. Нам нужен вывод Safari, чтобы проверить, какой из двух (больше) прав, прежде чем можно будет отправить отчет об ошибке.

Danny '365CSI' Engelman 11.03.2024 14:23
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
3
214
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я провел рефакторинг кода: https://toggle-switch.github.io/
Чтобы упростить создание DOM и обработку событий.
Но я, вероятно, не совсем правильно понял вашу обработку атрибутов.

Добавлены предупреждения:

Выход хрома:

Вывод ФаерФокса:

Нам нужно проверить Safari, чтобы определить, какой из двух «правильный».

Большое спасибо за ответ @Danny. Обработка событий Xbrowser больше не является проблемой (см. оператор переключения в строке № 115 в toggle.js, кстати, согласно caniuse.com, FF — единственный браузер, использующий originalTarget). Теперь проблема (см. EDIT 1) заключается в преобразовании FF НАЖМИТЕ событие для события INPUT, когда оно проходит через слой осмоса к световому DOM. Мое синтетическое событие CLICK для ARIA остается щелчком мыши, поэтому я, вероятно, направлю код к нему по одному пути. Но это раздражает, и ДА, я бы очень хотел узнать, что делает Safari!

McMurphy 11.03.2024 14:53
Ответ принят как подходящий

Хорошо, ответ был довольно простым. Я попался в ловушку школьника, думая, что Disabled=false означает, что элемент не отключен.

В общем, я исправил эту логическую ошибку, и теперь FireFox и Safari работают так же хорошо, как и Chrome/Edge/Opera/Samsung.

См. демо для подтверждения или посмотрите Исходный код для получения дополнительной информации.

Другие вопросы по теме