选择：通过单击所选文本取消选择不正确的 isCollapsed 值

如何解决选择：通过单击所选文本取消选择不正确的 isCollapsed 值

问题

我需要根据鼠标事件检测选定的文本。我还需要检测当前选择何时消失。我的下一个代码适用于您选择某些内容并通过单击选择之外的内容取消选择的情况。但是当您想通过单击所选文本取消选择时，此代码不起作用。

请测试下一个代码以了解我的意思。

环境

• Google Chrome 或 Mozilla Firefox

如何复制

1. 打开带有一些文本的页面（文本应表示为文本节点）。
2. 将此代码粘贴到控制台：

let mousepressed = false;

document.addEventListener('mousedown',() => {
    mousepressed = true;
});

document.addEventListener('mouseup',() => {
    if (mousepressed) {
        const selection = window.getSelection();
        const isCollapsed = selection.isCollapsed;

        console.log(`Collapsed: ${isCollapsed}`);

        mousepressed = false;
    }
});

3. 在某个单词上双击左键。您将看到以下折叠序列：false、true。
4. 在所选单词外单击左键（例如，通过单击页面背景）。您将看到此折叠序列：true。实际选择将消失。
5. 与 № 3 相同。
6. 在选定的单词上单击左键。您将看到此折叠序列：false。但实际选择将消失。

发生了什么

注意 № 4 和 № 6 之间的区别。它们都导致相同的结果：选择将消失。但有一个区别：№ 4 将正确指向该选择已折叠，但 № 6 会将消失的选择视为未折叠。这意味着 window.getSelection() 将提供消失的选择，即使没有实际可见的选择。

它发生在两个浏览器中：Google Chrome 和 Mozilla Firefox。

如何测试错误的事件顺序

使用稍微不同的代码执行所有这些步骤：

let mousepressed = false;

document.addEventListener('mousedown',() => {
    if (mousepressed) {
        window.setTimeout(() => {
            const selection = window.getSelection();
            const isCollapsed = selection.isCollapsed;

            console.log(`Collapsed: ${isCollapsed}`);
        },1000);

        mousepressed = false;
    }
});

它是一样的，但现在 window.getSelection() 将被延迟调用。现在 № 6 产生预期结果：true。

为什么会发生

我不知道。我认为不同情况下的事件顺序是有关系的。情况 № 4 订单产生预期结果。在情况 № 6 中，事件的顺序可能不同，并且该顺序产生了预期之外的结果。

我的要求

我的代码有问题吗？还是应该在 Chromium 和 Bugzilla 上报告的错误？或者它实际上是预期的行为？

我的意思是，我需要为 № 4 和 № 6 实现相同的结果 (Collapsed: true)。

解决方法

使用这种模式解决了问题：

let mousePressed = false;

document.addEventListener('mousedown',() => {
    mousePressed = true;
});

document.addEventListener('mouseup',() => {
    if (mousePressed) {
        window.setTimeout(() => {
            const selection = window.getSelection();
            const isCollapsed = selection.isCollapsed;

            console.log(`Collapsed: ${isCollapsed}`);
        },0);

        mousePressed = false;
    }
});

即具有 0 毫秒延迟的计时器。

现在 № 4 和 № 6 都正确处理了。

但我仍然不确定处理这种情况是否正确。可能代码有问题，可能两个浏览器都有问题。