РЕДАКТИРОВАТЬ 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?
См. консоль F12 на сайте toggle-switch.github.io Я попытался провести рефакторинг вашего кода, чтобы упростить создание DOM и обработку событий. Я не понимаю подробностей обработки вашего атрибута, похоже, много шаблонов для изменения атрибута HTH.
Посмотрите разницу консолей Chromium и FireFox. Нам нужен вывод Safari, чтобы проверить, какой из двух (больше) прав, прежде чем можно будет отправить отчет об ошибке.
Я провел рефакторинг кода: https://toggle-switch.github.io/
Чтобы упростить создание DOM и обработку событий.
Но я, вероятно, не совсем правильно понял вашу обработку атрибутов.
Добавлены предупреждения:
Нам нужно проверить Safari, чтобы определить, какой из двух «правильный».
Большое спасибо за ответ @Danny. Обработка событий Xbrowser больше не является проблемой (см. оператор переключения в строке № 115 в toggle.js, кстати, согласно caniuse.com, FF — единственный браузер, использующий originalTarget). Теперь проблема (см. EDIT 1) заключается в преобразовании FF НАЖМИТЕ событие для события INPUT, когда оно проходит через слой осмоса к световому DOM. Мое синтетическое событие CLICK для ARIA остается щелчком мыши, поэтому я, вероятно, направлю код к нему по одному пути. Но это раздражает, и ДА, я бы очень хотел узнать, что делает Safari!
Хорошо, ответ был довольно простым. Я попался в ловушку школьника, думая, что Disabled=false означает, что элемент не отключен.
В общем, я исправил эту логическую ошибку, и теперь FireFox и Safari работают так же хорошо, как и Chrome/Edge/Opera/Samsung.
См. демо для подтверждения или посмотрите Исходный код для получения дополнительной информации.
Добро пожаловать в StackOverflow, надеюсь, вы найдете здесь новые знания. Вы можете помочь нам ответить на ваш вопрос, добавив фрагмент StackOverflow с минимальным воспроизводимым примером. Это поможет читателям выполнить ваш код одним щелчком мыши. И помогите создавать ответы одним щелчком мыши. Спасибо.