Javascript

Question

如何防止在 Firefox 的 mousedown 事件期间突出显示任何文本？

我有一个事件处理程序，可以在鼠标按下事件期间打开并聚焦一个新的浏览器选项卡。

如果用户在 mousedown 期间轻微移动鼠标，某些文本会无意中 突出显示，在新选项卡打开之前短暂地突出显示。

稍后，在关闭该新选项卡后，立即 returns 关注初始选项卡，该选项卡的行为就像 鼠标按钮仍然与之前的点击有关 （但事实并非如此），然后移动鼠标（甚至没有使用按钮）只会更改无意中突出显示的文本的范围，直到用户单击该选项卡页面内的某个位置（导致最终检测到 mouseup 事件通过该选项卡）。

新标签打开和聚焦的速度如此之快，以至于初始标签永远不会发生鼠标弹起。

此问题主要发生在 Firefox 中。这是一些示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>mousedown highlighting issue</title>
    <script>
        function mousedownHandler()
        {
            let url = "https://www.w3.org/TR/uievents/#event-type-mousedown";
            let windowName = (new Date()).getTime().toString();
            window.open(url,windowName).focus();
        }
        function main()
        {
            document.body.addEventListener('mousedown', mousedownHandler);
        }
        window.addEventListener('load', main);
    </script>
</head>
<body>
    <h1>Lorem Ipsum</h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue ante eget orci aliquam, vel blandit mauris congue. Vestibulum gravida blandit est eu vestibulum. In id posuere eros. Suspendisse sed mi bibendum, tincidunt nisl vel, laoreet lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque vitae tellus varius, pellentesque erat eget, condimentum ex. Mauris blandit arcu tellus, laoreet varius diam bibendum in. Quisque tempor lacinia libero, at feugiat urna viverra id. Integer dapibus mollis enim, quis commodo tortor venenatis eu. Integer mollis lobortis urna sed tincidunt. Morbi eu rutrum tortor. Pellentesque felis urna, bibendum vitae erat nec, dapibus porttitor enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu iaculis ante.
    </p>
</body>
</html>

您可以在 Firefox 中重现该问题，方法是快速尝试突出显示上面编码的页面上的文本。

Answer 1

最简单的解决方案是添加 event.preventDefault() 以防止发生默认的 mousedown 操作（该默认操作是浏览器识别鼠标已被按下并在鼠标移动时突出显示文本）：

function mousedownHandler(event) {
  event.preventDefault();
  let url = "https://www.w3.org/TR/uievents/#event-type-mousedown";
  let windowName = (new Date()).getTime().toString();
  window.open(url, windowName).focus();
}

document.body.addEventListener('mousedown', mousedownHandler);

https://jsfiddle.net/793zbomy/1/

Javascript - 防止鼠标按下时意外的文本突出显示 (firefox)

Javascript - Prevent Unintended Text-Highlighting onmousedown (firefox)

dom

mouseevent

highlight