当在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位)

最佳答案

这是因为mousemove事件将鼠标指针悬停在新添加的输入字段上时将其聚焦。请注意,当按住鼠标按钮时,如果您不移动鼠标并且不移动就释放鼠标按钮,则输入不会被聚焦。如果您手握不稳,请尝试在笔记本电脑中使用触摸板单击;)

一种解决方案是捕获clickmouseup事件而不是mousedown

10-05 20:38
查看更多