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

Question 1

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

Question 2

Запатентованные варианты 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 <10 и Opera вам нужно будет использовать 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"));

Question 3

Кажется, что пользовательский выбор CSS не предотвращает перетаскивание изображения ... так что ...

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;
    });
});

Question 4

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

Question 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);
    });
});

Question 6

У вас есть какое-то прозрачное изображение, которое вы выбрали? Обычно при перетаскивании изображения появляется значок «не может упасть». В противном случае он обычно выделяет текст при перетаскивании. В таком случае вам, возможно, придется поместить изображение позади всего, используя z-index.

Answer 1

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

Answer 2

Запатентованные варианты 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 <10 и Opera вам нужно будет использовать 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"));

Answer 3

он не выбран, но все еще копируется в буфер обмена (согласно спецификации MDC на goo.gl/5P8uH )

ithkuil

Answer 4

@ithkuil: Интересно. Похоже, -moz-noneэто путь. Я поправлю свой ответ.

Tim Down

Answer 5

В Firefox 5 -moz-noneFirebug , похоже, не выполняет автозаполнение, хотя noneэто: -moz-user-select: none(работает)

Lekensteyn

Answer 6

@Lekensteyn: оба работают, чтобы предотвратить выбор, но теоретически разница есть: developer.mozilla.org/en/CSS/-moz-user-select . Однако следующее, похоже, не поддерживает это в Firefox 5: jsfiddle.net/vhwJ5/2 .

Тим Даун

Answer 7

я почти уверен, что user-selectимеет дело только с текстом и никакими другими элементами

oldboy

Answer 8

Кажется, что пользовательский выбор CSS не предотвращает перетаскивание изображения ... так что ...

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;
    });
});

Answer 9

Вы можете использовать селектор «img», но будьте осторожны с «event.preventDefault ();» потому что никакие другие события, связанные с "mousedown", не будут работать с ними на вашей странице ...

молоколоко

Answer 10

5

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

Kennebec
источник

2

Что меня зацепило, так это то, что вам нужны оба обработчика перемещения мыши и перемещения, а не только обработчики перемещения!

Matthew Schinckel

Answer 11

2

Что меня зацепило, так это то, что вам нужны оба обработчика перемещения мыши и перемещения, а не только обработчики перемещения!

Matthew Schinckel

Answer 12

4

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);
    });
});

лист
источник

Спасибо за это, некоторое время искал правильный способ заблокировать список select I, который я блокировал при щелчке, так как отключенные значения не

публикуются

Answer 13

Спасибо за это, некоторое время искал правильный способ заблокировать список select I, который я блокировал при щелчке, так как отключенные значения не

публикуются

Answer 14

У вас есть какое-то прозрачное изображение, которое вы выбрали? Обычно при перетаскивании изображения появляется значок «не может упасть». В противном случае он обычно выделяет текст при перетаскивании. В таком случае вам, возможно, придется поместить изображение позади всего, используя z-index.

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

Ответы: