点击已选文本时document.getSelection()的type显示异常问题

现象成因 #

这是浏览器事件时序和Selection对象的动态特性共同导致的：

• 点击已选中的文本时，mouseup事件触发的瞬间，浏览器还没完成「清除选区→插入光标」的状态切换，此时直接读取.type拿到的是之前选区的"Range"状态。
• 但控制台打印的Selection对象是实时动态更新的，当你展开查看对象详情时，浏览器已经完成了状态切换，所以显示的是type: "Caret"。
• 点击未选中区域时没有旧选区的干扰，mouseup触发时状态已经稳定，所以.type能正确返回"Caret"。

解决方法 #

方法1：延迟读取（最简单） #

利用setTimeout把属性读取放到事件循环的下一轮执行，等浏览器完成状态切换后再获取值：

$(document).mouseup(function(){
  setTimeout(() => {
    console.log(window.getSelection().type);
  }, 0);
});

方法2：监听选区变化事件 #

如果需要更精准的触发时机，直接监听selectionchange事件，它会在选区状态真正完成改变时触发：

let isMouseTriggered = false;

$(document).mouseup(function(){
  isMouseTriggered = true;
});

document.addEventListener('selectionchange', function() {
  if (isMouseTriggered) {
    console.log(window.getSelection().type);
    isMouseTriggered = false;
  }
});

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