В большинстве браузеров это может быть достигнуто с помощью собственных изменений свойства CSS user-select, , первоначально предложенного и затем отмененного в CSS3 и теперь предлагаемого в CSS UI Level 4 :
*.unselectable {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
Для IE <10 и Opera <15 вам нужно будет использовать атрибут <code>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.
Это все еще не охватывает все возможности. Хотя невозможно инициировать выборки в невыбираемых элементах, в некоторых браузерах (например, IE и Firefox) все еще невозможно предотвратить выборки, которые начинаются до и заканчиваются после невыбираемого элемента, не делая весь документ недоступным для выбора.