如何实现输入框/Div内操作时保持Div可见，外部操作时隐藏？

我来帮你搞定这个交互问题，让.options div能在input聚焦/点击或者点击操作在div内部时保持可见，在input失焦且点击不在div内或点击div外部时隐藏。

核心思路 #

• 监听input的focus事件：触发时直接显示.options
• 监听input的blur事件：这里不能立刻隐藏，因为点击.options时input会先失焦，所以需要延迟判断后续点击目标
• 监听全局click事件：检查点击的目标是否属于input或.options元素，若都不属于则隐藏.options

完整代码示例 #

HTML

<input type="text" id="myInput" placeholder="点击我显示下拉">
<div class="options" style="display:none;">
  <p>选项1</p>
  <p>选项2</p>
  <p>选项3</p>
</div>

CSS

.options {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
}

JavaScript

const input = document.getElementById('myInput');
const options = document.querySelector('.options');

// 显示下拉框
input.addEventListener('focus', () => {
  options.style.display = 'block';
});

// 处理失焦：延迟判断是否点击了下拉框
input.addEventListener('blur', () => {
  setTimeout(() => {
    // 如果当前焦点不在下拉框内，就隐藏
    if (!options.contains(document.activeElement)) {
      options.style.display = 'none';
    }
  }, 100);
});

// 全局点击事件：判断点击区域
document.addEventListener('click', (e) => {
  const isInputOrOptions = input.contains(e.target) || options.contains(e.target);
  if (!isInputOrOptions) {
    options.style.display = 'none';
  }
});

代码说明 #

1. focus事件：input获得焦点时直接显示下拉框，符合需求的第一个保持可见条件
2. blur事件的延迟处理：因为blur事件会比click事件先触发，所以用setTimeout延迟100ms，等点击事件完成后再判断当前焦点是否在下拉框内——如果用户点击了下拉框，此时下拉框内的元素会获得焦点，就不隐藏；否则隐藏
3. 全局click事件：捕获页面上所有点击，只要点击的不是input或下拉框内部元素，就隐藏下拉框，覆盖了“点击div外部”的隐藏条件

这样调整后，就能完美实现你需要的交互逻辑啦！

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