jQuery如何实现点击div外隐藏且拖拽向外时不触发隐藏功能

你当前的逻辑只校验了鼠标松开时的触发位置是否在div外，没有考虑鼠标按下时的初始位置，所以从内部拖拽到外部松开的场景会被误判为“点击外部区域”。

修改代码 #

新增状态变量记录鼠标按下的位置范围，调整事件逻辑即可：

// 新增状态变量，记录鼠标按下时是否在chat容器内
let isMouseDownInChat = false;
// 保留你原有获取chat元素的逻辑
const chat = $('#你的chat元素选择器');

// 监听chat容器的mousedown事件，标记按下位置在内部
chat.on('mousedown', function(e) {
  // 阻止事件冒泡到document的mousedown，避免状态被覆盖
  e.stopPropagation();
  isMouseDownInChat = true;
});

// 监听document的mousedown事件，标记按下位置在外部
$(document).on('mousedown', function() {
  isMouseDownInChat = false;
});

// 优化原有的mouseup隐藏逻辑
$(document).on('mouseup', function(e) {
  // 鼠标按下时就在chat内部：无论松开位置在哪都不触发隐藏，重置状态后直接返回
  if (isMouseDownInChat) {
    isMouseDownInChat = false;
    return;
  }
  // 只有按下、松开位置都在chat外部时，才执行隐藏
  if (!chat.is(e.target) && chat.has(e.target).length === 0) {
    chat.hide();
  }
});

适配动态元素场景 #

如果你的chat元素是页面加载完成后才动态渲染到DOM中的，可以将chat的mousedown事件改为事件委托绑定，避免绑定失效：

$(document).on('mousedown', '#你的chat元素选择器', function(e) {
  e.stopPropagation();
  isMouseDownInChat = true;
});

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