如何避免大范围滑动选择文本时触发div自动隐藏

问题根因 #

你目前绑定的click事件触发逻辑是「鼠标按下+鼠标松开」的完整动作，当你在输入框内按下鼠标选中文本、拖动到输入框外松开时，本次click事件的触发源不在.input容器内，事件冒泡到document后就会触发隐藏逻辑，原来只靠stopPropagation的方案覆盖不到这种场景。

修复代码 #

替换你的JS逻辑为以下代码即可：

// 标记是否在搜索容器内按下鼠标
let isMouseDownInSearch = false;

$('.input')
  .on('mousedown', () => isMouseDownInSearch = true)
  .on('click', e => e.stopPropagation());

$('.button').click(e => {
  $('.input').slideToggle('fast');
  e.stopPropagation();
})

$(document)
  .on('mousedown', () => isMouseDownInSearch = false)
  .on('click', e => {
    // 搜索区域内按下的鼠标/点击的是按钮/点击的是搜索区域内部，都不触发隐藏
    if (isMouseDownInSearch || $(e.target).closest('.button, .input').length) return;
    $('.input').slideUp('fast');
  });

逻辑说明 #

• 通过标记位记录用户的鼠标按下位置，只要按下动作是在搜索容器内发生的，就算选中文本后拖动到容器外松开，也不会触发隐藏，完全匹配用户文本选中编辑的使用场景。
• 保留原有点击区域判断逻辑，点击容器、按钮以外的区域时仍会正常隐藏搜索框，不影响原有功能。

内容的提问来源于stack exchange，提问作者Alvaro Menéndez