FireFox/Safari 事件目标与影子 DOM 中的当前目标

Question

我见过许多看似相似的（Firefox + Event Target）问题，但没有处理我的特定问题。

基本上，我在这里和参考文档中读到的所有内容都表明目标是事件/单击发生的位置，当前目标是注册事件侦听器的位置。

无论哪种方式，我已经使用 Event.Target 告诉我“点击了什么”很长一段时间（在此之前是 srcElement），并且带有 Shadow DOM Chrome 的 event.target 胜出。

以toggle.js中的这个示例第119行为例，e.target.tagName在Chrome中是“LABEL”，但在FireFox中是“ABC-TOGGLE”，我假设是Safari。

现在，正如那些处理过标签点击的人知道的那样，该事件会随着单击发生时的复选框状态而冒泡（并且应该被忽略），然后通过复选框上的单击事件冒泡并更新/ tagName 为 INPUT 的新复选框状态。我让输入冒泡到 light DOM，其中目标被转换为 ABC-TOGGLE，每个人都很高兴！除了 FireFox 和 Safari :-(

无论如何，FireFox 中的“currentTarget”似乎就是我正在寻找的。

这是其他 Web 组件/自定义元素开发人员正在使用的吗？标准？

Answer 1

好的，FireFox（根据 caniuse.com，只有 FireFox）使用名为“originalTarget”的东西：-

    this.#toggle.addEventListener('click', (e) => {
            var trueTarget = null;
            switch  (true) {
                case    (e.target.tagName == "INPUT"):
                        trueTarget = e.target;
                        break;
                case    (e.currentTarget.tagName == "INPUT"):
                        trueTarget = e.currentTarget;
                        break;
                case    (e.originalTarget != undefined && e.originalTarget.tagName == "INPUT"):
                        trueTarget = e.originalTarget;
                        break;
                default:
            }

            if (trueTarget == null) {
                e.stopPropagation();
                return;
            }
            
            console.log("Inside " + this.#checkbox.checked + " " + trueTarget.tagName);

            this.setAttribute("checked", this.#checkbox.checked);
            this.setAttribute("aria-checked", this.#checkbox.checked);
        })

第一个 CASE 处理 Chrome、Edge 和 Opera。第三个案例处理 FireFox。我将希望寄托在 Safari 中的第一个或第二个 CASE 子句上。

不知道 Safari 是否会像 FF 那样将 event.type 从 CLICK 更改为 INPUT，但我们拭目以待。