焦点在input元素时button无法接收点击事件的问题排查

问题背景 #

我有一个包含输入框和提交按钮的简单表单：

• 输入框获取焦点时显示提示文本（hint），桌面端hint采用absolute定位（显示在输入框右侧），移动端（屏幕宽度≤500px）改为默认static定位（显示在输入框下方）
• 点击提交按钮时，模拟验证失败逻辑，强制将焦点放回输入框
• 核心问题：当hint设为static定位时，按钮需要点击两次才能触发事件；改为absolute定位则一切正常

原因拆解 #

当hint是static定位时，它会占据文档流空间：

1. 输入框聚焦时，hint显示，会把下方的提交按钮向下挤开
2. 第一次点击按钮时，点击动作会先让输入框失焦，hint立即隐藏，按钮瞬间向上移动——此时点击的是按钮原来位置的空白区域，并未命中按钮
3. 第二次点击时，按钮位置已经稳定，才能触发点击事件

而absolute定位的hint脱离文档流，不会改变按钮的布局位置，因此不会出现点击偏移的问题。

解决方案 #

方案1：为hint预留固定空间（推荐） #

在包含输入框的容器中预留足够高度，避免hint显示/隐藏时改变文档流：

.form-field {
  position: relative;
  padding: 1em;
  /* 根据hint实际高度调整预留空间 */
  min-height: 4em;
}

.hint {
  display: none;  
  position: absolute;
  top: 0;
  left: 20em;  
  width: 15em;
  color: #000;
  background-color: #fffbb8;
  border: 1px solid #ffc20d;
}

input:focus + .hint {
  display: block;
}

@media only screen and (max-width: 500px) {
  .hint {
    position: static;
    margin-top: 0.5em;
  }
}

方案2：延迟聚焦操作，确保点击事件优先触发 #

通过setTimeout延迟输入框的聚焦动作，让按钮的点击事件先完成：

document.getElementById('submit').addEventListener('click', function(event) {
  event.preventDefault();
  // 延迟0ms，利用事件循环确保点击事件先执行
  setTimeout(() => {
    document.getElementById('first_name').focus();
  }, 0);
});

方案3：用visibility替代display控制hint显示 #

visibility:hidden会保留元素的文档流位置，不会导致按钮移位：

.hint {
  visibility: hidden;  
  position: absolute;
  top: 0;
  left: 20em;  
  width: 15em;
  color: #000;
  background-color: #fffbb8;
  border: 1px solid #ffc20d;
}

input:focus + .hint {
  visibility: visible;
}

@media only screen and (max-width: 500px) {
  .hint {
    position: static;
  }
}

内容的提问来源于stack exchange，提问作者Federico Stilman