调用element.click()触发可聚焦元素点击时未转移焦点的原因咨询

我来帮你拆解这个问题，其实背后是浏览器事件序列和焦点安全策略的双重作用：

先看你提供的测试代码 #

JavaScript

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);

HTML

<!DOCTYPE html>
<html>
  <body>
    <div id="dom-root"></div>
  </body>
</html>

核心原因分析 #

首先得理清真实用户点击的完整事件逻辑：当用户用鼠标点击输入框时，浏览器会依次触发 mousedown → mouseup → click 三个事件，让元素获得焦点的默认行为其实是绑定在mousedown事件上的，而非click事件。

但你用element.click()方法时，只会直接触发click这单个事件，并不会模拟完整的mousedown和mouseup流程——这就导致原本负责聚焦的关键环节被跳过了，自然不会自动触发焦点转移。

再来说你提到的规范内容：规范里说“非可信的click事件也会触发默认动作”，这里的“默认动作”指的是链接跳转、表单提交这类和click直接绑定的行为，并不包含聚焦（聚焦属于mousedown的职责范围），所以这部分规范和你的场景其实不匹配。

另外你手动添加的click监听调用focus()也没生效，是因为现在主流浏览器都有严格的焦点安全限制：非用户主动触发的脚本（比如页面加载时自动执行的代码）调用focus()会被浏览器拦截，只有在可信的用户交互上下文里（比如用户真实点击页面元素后触发的回调），focus()才会正常生效。

验证思路 #

你可以把代码改成由用户真实交互触发，就能看到焦点正常转移了：

const e = document.getElementById("dom-root");
const e2 = document.createElement("input");
e.appendChild(e2);

// 绑定到用户真实点击的回调里
document.body.addEventListener('click', () => {
  console.log("Before click:", document.activeElement);
  e2.click();
  e2.focus(); // 此时处于用户交互上下文，会正常生效
  console.log("After click:", document.activeElement);
});

备注：内容来源于stack exchange，提问作者Hatatister