3 способа запретить выделение текста на сайте

Бывают ситуации, когда необходимо запретить выделение текста или сделать на сайте кнопку по которой будут кликать много раз подряд (например, стрелка слайдера). И случается такая неприятная ситуация, когда после 2 или 3 клика какая то область выделяется синим цветом. Это очень раздражает и не дает спокойно дальше работать. С этим можно и нужно бороться.

Сегодня мы рассмотрим 3 способа запретить выделение текста на сайте с помощью css, javascript и передачей фокуса.

Правила css

Самый простой и действенный (на мой взгляд) способ с помощью css. Для браузеров, которые не поддерживают это свойство написаны префиксные варианты. Вешать нужно непосредственно на сам элемент (например, кнопку):

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Запрет JavaScript

Этот способ подразумевает написание и исполнение скрипта. По статистике в 95% браузерах JavaScript будет работать. Поэтому можно считать этот способ достаточно безопасным и жизнеспособным:

$("body").on("mousedown", "ТУТ УКАЗЫВАЕМ ID или CLASS БЛОКА, НА КОТОРЫЙ ВЕШАЕМ - .class, #id", function (e) {
    e.preventDefault();
});

Передача фокуса

Способ очень не очевидный, но тоже работает. Суть заключается в том, что при клике на элемент, фокус после клика передается на другой элемент. Кому и зачем это может понадобиться? Ситуации бывают разные, может и пригодится:

$("body").on("mouseup", "ТУТ УКАЗЫВАЕМ ID или КЛАСС БЛОКА, НА КОТОРЫЙ ВЕШАЕМ - .class, #id", function () {
    $("ТУТ УКАЗЫВАЕМ ID или CLASS ЭЛЕМЕНТА, НА КОТОРЫЙ ПЕРЕДАЕМ ФОКУС").trigger("focus");
});

Вот и все! Успехов с выделениями!