Question

如何防止在Firefox中的鼠标按下事件中突出显示任何文本？

我有一个事件处理程序，该事件处理程序在mousedown事件期间打开并聚焦新的浏览器选项卡。

如果用户在移动鼠标时略微移动鼠标，则在新标签页打开之前不久，某些文本会无意突出显示。

稍后，在关闭新标签后，焦点会立即返回到初始标签，并且该标签的作用类似于先前点击时鼠标按钮仍处于活动状态（但不是），并且只需移动鼠标（甚至不按下按钮），都只会更改无意中突出显示的文本的范围，直到用户单击该选项卡页面内的某个位置（导致该选项卡最终检测到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-防止意外的文本突出显示onmousedown（firefox）

1 个答案: