Javascript-防止在MouseDown(firefox)上意外突出显示文本

Javascript-防止在MouseDown(firefox)上意外突出显示文本,javascript,dom,mouseevent,highlight,Javascript,Dom,Mouseevent,Highlight,在Firefox中,如何防止鼠标向下事件中突出显示任何文本 我有一个事件处理程序,在mousedown事件期间打开并聚焦新的浏览器选项卡 如果用户在鼠标向下移动过程中轻轻移动鼠标,则在新选项卡打开之前,某些文本会意外地突出显示 稍后,在关闭该新选项卡后,焦点立即返回到初始选项卡,该选项卡的行为类似于上次单击时鼠标按钮仍处于活动状态(但并非如此),移动鼠标(甚至没有按钮处于活动状态)只会更改无意中突出显示的文本的范围,直到用户单击该选项卡页面中的某个位置(导致该选项卡最终检测到mouseup事件)

在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>

鼠标向下突出显示问题
函数mousedownHandler()
{
让url=”https://www.w3.org/TR/uievents/#event-输入mousedown“;
让windowName=(新日期()).getTime().toString();
open(url,windowName.focus();
}
函数main()
{
document.body.addEventListener('mousedown',mousedownHandler);
}
window.addEventListener('load',main);
乱数假文

Lorem ipsum dolor sit amet,是一位杰出的献身者。这是奥奇·阿利奎姆(orci aliquam)的康格舞,是勃兰迪·莫里斯·康格(mauris congue)的舞曲。妊娠前庭是指胎儿前庭。在我的爱欲中。这是一个很好的例子。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。佩伦特斯凯葡萄品种,佩伦特斯凯葡萄品种,调味品,例如Mauris blandit arcu tellus,laoreet葡萄品种直径为。自由的临时工,在维韦拉庄园,是一个完整的莫利斯岛,是威尼斯人的共同财产。整尾软体动物。Morbi-eu-rutrum-tortor。佩伦特式的猫科动物乌尔纳(felis urna)、比本杜姆(bibendum vitae erat nec)、波提托(dapibus porttitor enim)。虎口浮雕和肘部浮雕同侧前庭;这是我的承诺。


在Firefox中,您可以通过快速突出显示上面编码的页面上的文本来重现该问题。

最简单的解决方案是添加
事件.preventDefault()
以防止出现默认的鼠标下移操作(默认操作是,浏览器识别鼠标已按下,并在鼠标移动时突出显示文本):

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