В большинстве браузеров это может быть достигнуто с помощью запатентованных вариантов user-select
свойства CSS , первоначально предложенных, а затем заброшенных в CSS 3 и теперь предложенных в CSS UI Level 4 :
*.unselectable {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in Internet Explorer 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
Для Internet Explorer <10 и Opera <15 вам нужно будет использовать unselectable
атрибут элемента, который вы не хотите выбирать. Вы можете установить это, используя атрибут в HTML:
<div id="foo" unselectable="on" class="unselectable">...</div>
К сожалению, это свойство не наследуется, то есть вы должны поместить атрибут в начальный тег каждого элемента внутри <div>
. Если это проблема, вы можете вместо этого использовать JavaScript, чтобы сделать это рекурсивно для потомков элемента:
function makeUnselectable(node) {
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));
Обновление 30 апреля 2014 года : этот обход дерева нужно перезапускать всякий раз, когда в дерево добавляется новый элемент, но из комментария @Han видно, что этого можно избежать, добавив mousedown
обработчик событий, который устанавливаетunselectable
цель событие. Смотрите http://jsbin.com/yagekiji/1 для деталей.
Это все еще не охватывает все возможности. Хотя невозможно инициировать выборки в невыбираемых элементах, в некоторых браузерах (например, Internet Explorer и Firefox) все еще невозможно предотвратить выборки, которые начинаются до и заканчиваются после невыбираемого элемента, не делая весь документ недоступным для выбора.