我见过许多看似相似的(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 组件/自定义元素开发人员正在使用的吗?标准?
好的,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,但我们拭目以待。