Запретить выделение в HTML

У меня есть div на HTML-странице, и всякий раз, когда я нажимаю кнопку мыши и перемещаю ее, она покажет, что курсор "не может упасть", как будто он выбирает что-то. Есть ли способ отключить выбор? Я попробовал CSS user-select без успеха.

5 75
javascript html textselection

5 ответов:

собственнические изменения user-select будет работать в большинстве современных браузеров:

*.unselectable {
   -moz-user-select: -moz-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 элемента, который вы хотите быть недоступным. Вы можете установить это с помощью атрибута в 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"));
151

это кажется CSS user-select не предотвращает перетаскивание изображений... так..

HTML:

<img src="ico.png" width="20" height="20" alt="" unselectable="on" /> Blabla bla blabla

CSS:

* {
     user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
}

::selection { background: transparent;color:inherit; }
::-moz-selection { background: transparent;color:inherit; }

JS:

$(function(){
    $('*:[unselectable=on]').mousedown(function(event) {
        event.preventDefault();
        return false;
    });
});
10

Я использую cancelBubble=true и stopPropagation() в мыши вниз и переместить обработчики.

5

event.preventDefault() Кажется, сделать трюк (проверено в IE7-9 и Chrome) :

jQuery('#slider').on('mousedown', function (e) {
    var handler, doc = jQuery(document);
    e.preventDefault();
    doc.on('mousemove', handler = function (e) {
        e.preventDefault();
        // refresh your screen here
    });
    doc.one('mouseup', function (e) {
        doc.off('mousemove', handler);
    });
});
4

У вас есть какое-то прозрачное изображение, ваш выбор? Обычно значок "cant drop" появляется при перетаскивании изображения. В противном случае он обычно выбирает текст при перетаскивании. Если это так, вам, возможно, придется поместить изображение за все, используя z-индекс.

1