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

Posted 2023-05-07

【中文标题】选择：通过单击选定文本取消选择的 isCollapsed 值不正确

【英文标题】：Selection: incorrect isCollapsed value for deselecting by clicking on selected text

【发布时间】：2021-06-20 11:37:52

【问题描述】：

问题

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

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

环境

Google Chrome 或 Mozilla Firefox

如何重现

用一些文本打开一些页面（文本应该表示为文本节点）。 将此代码粘贴到控制台中：

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;
    
);

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

发生了什么

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

这两种浏览器都会发生这种情况：Google Chrome 和 Mozilla Firefox。

如何测试错误的事件顺序

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

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`);
        , 1000);

        mousePressed = false;
    
);

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

为什么会发生

我不知道。我认为不同情况下的事件顺序是有区别的。对于情况№ 4，订单产生预期结果。对于第 6 种情况，事件的顺序可能不同，并且该顺序产生的结果不是预期的。

我的要求

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

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

【参考方案1】：

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

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 都得到了正确处理。

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