javascript - 为什么在 Chrome 中，当在 mousedown 处理程序中附加输入时，它会获得焦点？

Question

当输入字段在 mousedown 事件中添加到文档并位于被单击元素的顶部时，有时它会获得焦点。

var container = document.querySelector(".container");
var targ = document.querySelector("#target");

targ.addEventListener("mousedown", (e) => {
  var input = document.createElement("input");
  container.appendChild(input, targ);
});

.container {
  position: relative;
}

.container>* {
  position: absolute;
}

#target {
  margin: 10px;
}

.container>input {
  height: 50px;
}

<div class="container">
  <div id="target">Click here!</div>
</div>

这是一支笔:https://codepen.io/motz-art/pen/jgyYoY

为什么会发生这种情况？为什么这种情况并不总是发生？

Chrome 版本 75.0.3770.142(官方版本)(32 位)

Answer 1

这是因为当鼠标指针悬停在新添加的输入字段上时，mousemove 事件会将其聚焦。请注意，当您按住鼠标按钮但不移动鼠标并在没有任何移动的情况下释放鼠标按钮时，输入不会获得焦点。如果您的手没有那么稳定，请尝试使用笔记本电脑中的触摸板进行点击;)

解决方案是捕获 click 或 mouseup 事件而不是 mousedown。