Javascript - 防止意外文本 - 突出显示onmousedown(firefox)

问题描述 投票:1回答:1

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

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

如果用户稍微移动鼠标,则在新选项卡打开之前,在mousedown期间会有一些文本被无意中突出显示。

稍后,在关闭新选项卡后,焦点会立即返回到初始选项卡,该选项卡的作用就像鼠标按钮仍然处于先前点击的状态(但实际上没有),并且移动鼠标(甚至没有使用按钮) )只需更改无意中突出显示的文本的范围,直到用户单击该选项卡页面中的某个位置(导致该选项卡最终检测到mouseup事件)。

新选项卡打开并快速聚焦,初始选项卡永远不会看到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中通过快速尝试突出显示上面编码的页面上的文本来重现该问题。

javascript dom mouseevent highlight
1个回答
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/

© www.soinside.com 2019 - 2024. All rights reserved.