Javascript - предотвращение непреднамеренного выделения текста при включении (Firefox) - PullRequest
Новая
       12

Javascript - предотвращение непреднамеренного выделения текста при включении (Firefox)

0 голосов
/ 08 сентября 2018

Как я могу предотвратить выделение текста во время события mousedown в Firefox?

У меня есть обработчик событий, который открывает и фокусирует новую вкладку браузера во время события mousedown.

Если пользователь слегка двигает мышью, во время 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, быстро попытавшись выделить текст на странице, закодированной выше.

1 Ответ

0 голосов
/ 08 сентября 2018

Самое простое решение - добавить 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/

...