代码之家 › 专栏 › 技术社区 › Lonnie Best

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

highlight mouseevent dom javascript

Lonnie Best · 技术社区 · 6 年前

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

无意中

稍后,关闭新选项卡后,焦点立即返回到初始选项卡,该选项卡的行为与 鼠标键仍然从先前的点击中处于激活状态 (但事实并非如此),移动鼠标(甚至没有按下按钮)只会改变无意中突出显示的文本的范围,直到用户单击该选项卡页面中的某个位置(导致该选项卡最终检测到mouseup事件)。

新的选项卡打开和聚焦的速度如此之快,以至于最初的选项卡永远看不到鼠标的出现。

<!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中,您可以通过快速尝试突出显示上面编码的页面上的文本来重现这个问题。

1 回复 | 直到 6 年前

CertainPerformance 6 年前

最简单的解决办法是 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/