Javascript - Prevent Unintended Text-Highlighting onmousedown (firefox)

Question

How can I prevent any text from being highlighted during a mousedown event in Firefox?

I have an event handler that opens and focuses a new browser-tab during a mousedown event.

If the user is moving their mouse slightly, during mousedown, some text gets unintentionally highlighted, briefly before the new tab opens.

Later, after closing that new tab, focus returns immediately to the initial tab and that tab acts like the mouse-button is still engaged from that prior click (but it isn't), and moving the mouse (without even having the button engaged) simply changes the range of the unintentionally-highlighted-text, until the user clicks somewhere within that tab's page (causing a mouseup event to finally be detected by that tab).

The new tab opens and focuses so quickly, that the initial tab never sees the mouseup happen.

This issue is happening primarily in Firefox. Here's some sample code:

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

You can reproduce the issue, in Firefox, by quickly trying to highlight text on the page coded above.

CertainPerformance CertainPerformance · Accepted Answer · 2018-09-08T04:13:02

The simplest solution is to add event.preventDefault() to prevent the default mousedown action from occurring (that default action being, the browser recognizing that the mouse has been pressed and highlighting text when the mouse moves):

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 - Prevent Unintended Text-Highlighting onmousedown (firefox)

1 Answers