我偶然发现了这种行为。我希望输入元素在单击时获得焦点,以便它成为文档的活动元素。点击是通过 javascript 使用
element.click()
以编程方式生成的。可聚焦元素的默认操作是,如果单击 w3,它们就会获得焦点。
这就是我所拥有的: 索引.html
<!DOCTYPE html>
<html>
<body>
<div id="dom-root"></div>
</body>
</html>
然后我从 devtools 控制台运行此代码:
const e = document.getElementById("dom-root");
const e2 = document.createElement("input");
e.appendChild(e2);
e2.addEventListener("click", () => e2.focus());
console.log("Before click:", document.activeElement);
e2.click();
console.log("After click:", document.activeElement);
焦点不变。我用 Chrome 和 Safari 对此进行了测试。 根据this页面
Most untrusted events will not trigger default actions, with the exception of the click event. This event always triggers the default action, even if the isTrusted attribute is false
所以我预计焦点会改变。
为什么焦点没有改变?
来自 Mozilla 的网络文档:
HTMLElement.click() 方法模拟鼠标单击元素。当在元素上调用时,会触发该元素的单击事件(除非设置了其禁用属性)。
它不会使元素聚焦,因为它是“模拟”单击,而不是实际单击。 只需在需要聚焦的元素上使用
.focus()
即可。