如何避免弹窗文本选择时误触背景关闭点击事件

场景回顾 #

弹窗背景（#overlay）点击可关闭弹窗，但在弹窗内输入框选中文本并拖动鼠标到背景上释放时，会误触发背景的click事件导致弹窗关闭；替换为mousedown/pointerdown事件会引发事件统一、按钮事件先于输入框blur等问题。以下是两种仅通过#overlay和#overlay_content实现的简洁方案：

方案一：通过背景click事件判断鼠标按下起始元素 #

核心思路：记录鼠标按下时的起始元素，仅当起始元素是背景本身时，才执行关闭逻辑，过滤掉从弹窗内容区域开始的拖拽操作。

// 记录鼠标按下的起始元素
let mouseDownOrigin = null;
document.addEventListener('mousedown', (e) => {
  mouseDownOrigin = e.target;
});

const overlay = document.getElementById('overlay');
overlay.addEventListener('click', () => {
  // 仅当按下起始元素是背景时才关闭弹窗
  if (mouseDownOrigin !== overlay) return;
  overlay.style.display = 'none';
});

方案二：标记弹窗内容区域的鼠标按下操作 #

核心思路：通过弹窗内容容器（#overlay_content）的mousedown事件标记操作来源，在背景click事件中跳过来自内容区域的拖拽触发。

let isFromContent = false;
const content = document.getElementById('overlay_content');

// 标记从内容区域发起的鼠标操作
content.addEventListener('mousedown', () => {
  isFromContent = true;
});

// 鼠标松开后重置标记（用setTimeout确保click事件先执行）
document.addEventListener('mouseup', () => {
  setTimeout(() => isFromContent = false, 0);
});

const overlay = document.getElementById('overlay');
overlay.addEventListener('click', () => {
  if (isFromContent) return;
  overlay.style.display = 'none';
});

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