当在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
事件将鼠标指针悬停在新添加的输入字段上时将其聚焦。请注意,当按住鼠标按钮时,如果您不移动鼠标并且不移动就释放鼠标按钮,则输入不会被聚焦。如果您手握不稳,请尝试在笔记本电脑中使用触摸板单击;)
一种解决方案是捕获click
或mouseup
事件而不是mousedown
。