Chrome为何跨div选文本？如何实现仅选中当前div内文本？

给定如下HTML代码：

<div style="user-select:none;position:absolute;top:10px;border:1px solid gray;height:100px;width:150px">
    <div style="user-select:text;position:absolute;top:10px">One</div>
    <div style="user-select:text;position:absolute;top:30px">Two Three</div>
</div>

双击或三击文本Two时，预期应选中同一div内的Two Three，但Chrome和Safari会错误选中不同div内的One和Two；Firefox的选中行为符合预期，仅选中Two Three。需要修改该行为，使其在Chrome和Safari中也仅选中当前div内的文本。

方法1：使用CSS user-select: contain #

给每个可选择文本的子元素添加user-select: contain样式，该属性会限制文本选择范围在当前元素内部，不会向外扩展到其他元素：

<div style="user-select:none;position:absolute;top:10px;border:1px solid gray;height:100px;width:150px">
    <div style="user-select:text;position:absolute;top:10px;user-select:contain">One</div>
    <div style="user-select:text;position:absolute;top:30px;user-select:contain">Two Three</div>
</div>

兼容性：Chrome 64+、Safari 13.1+、Firefox 74+均支持该属性，适合现代浏览器环境。

方法2：JavaScript手动控制选择范围 #

如果需要兼容旧版浏览器，可以监听双击、三击事件，手动修正文本选择范围：

const selectableDivs = document.querySelectorAll('[style*="user-select:text"]');

selectableDivs.forEach(div => {
  let clickCount = 0;
  let clickTimer;

  div.addEventListener('click', (e) => {
    clickCount++;
    clearTimeout(clickTimer);
    clickTimer = setTimeout(() => {
      clickCount = 0;
    }, 300); // 双击/三击的时间阈值，可根据需求调整

    if (clickCount === 2 || clickCount === 3) {
      e.preventDefault();
      const range = document.createRange();
      range.selectNodeContents(div);
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
    }
  });
});

这段代码会在双击或三击时，强制选中当前div内的所有文本，覆盖浏览器默认的跨元素选择行为。

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