选中跨#text区域的文本时，#asd无法正常显示的问题求助

问题根源 #

原代码只监听了#text的click事件，但文本选择（尤其是跨元素拖动选择）的触发逻辑和click事件不匹配：

• 从外部拖动选中#text内文本时，初始点击在外部，#text的click事件不会触发，导致无法检测到选中状态
• 选择结束时点击外部区域，同样不会触发#text的click事件，操作栏无法正常显示

修复方案 #

改用mouseup事件监听选择结束动作，同时精准判断选中内容是否和#text有交集，优化全局点击的隐藏逻辑：

完整代码 #

const text = document.querySelector("#text");
const asd = document.querySelector("#asd");

// 检查选中文本是否包含#text内的内容
function hasSelectedTextInTarget(target) {
  const selection = window.getSelection();
  if (!selection.toString()) return false;

  const range = selection.getRangeAt(0);
  const commonAncestor = range.commonAncestorContainer;
  // 判断选中范围是否和目标元素有交集
  return target.contains(commonAncestor) || target.isEqualNode(commonAncestor);
}

// 处理选择结束后的显示逻辑
function handleSelectionFinish() {
  if (hasSelectedTextInTarget(text)) {
    const rect = window.getSelection().getRangeAt(0).getBoundingClientRect();
    asd.style.left = `${rect.left}px`;
    asd.style.top = `${rect.bottom}px`;
    asd.style.display = "block";
  } else {
    asd.style.display = "none";
  }
}

// 监听全局mouseup，覆盖所有选择结束场景
document.addEventListener("mouseup", handleSelectionFinish);

// 全局点击隐藏逻辑：点击非#text、非#asd区域，且无选中内容时隐藏操作栏
document.addEventListener("click", function(event) {
  if (!text.contains(event.target) && !asd.contains(event.target)) {
    if (!hasSelectedTextInTarget(text)) {
      asd.style.display = "none";
    }
  }
});

#asd {
    position: absolute;
    display: none;
    background-color: #f2f2f2;
    padding: 10px;
    z-index: 10; /* 确保操作栏在最上层，避免被遮挡 */
}   

<p>Select the text below to display the div='asd':</p>
<p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus euismod,
  condimentum massa vel, interdum nisl. Sed euismod, massa vel condimentum interdum nisl. </p>

<div id="asd">
  div content
</div>

关键优化点 #

• 替换监听事件：用mouseup代替click，因为文本选择的结束时机是鼠标抬起，无论初始点击位置在哪，都能捕获选择完成的状态
• 精准判断选中范围：通过commonAncestorContainer检查选中内容是否包含在#text内，完美覆盖跨元素选择的场景
• 优化全局点击逻辑：排除点击#asd的情况，避免误隐藏操作栏，同时仅在无有效选中内容时执行隐藏动作

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