Запобігти виділенню в HTML


83

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

Відповіді:


167

Запатентовані варіанти 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"));

його не вибрано, але все одно скопійовано в буфер обміну (згідно специфікації MDC на goo.gl/5P8uH )
ithkuil

@ithkuil: Цікаво. Схоже, -moz-noneце шлях. Я зміню свою відповідь.
Тім Даун

У Firefox 5, -moz-noneздається, автозавершення Firebug не завершено, хоча none: -moz-user-select: none(працює)
Лекенштейн

@Lekensteyn: Обидва працюють, щоб запобігти відбору, але є умовно різниця: developer.mozilla.org/en/CSS/-moz-user-select . Однак таке, здається, не підтримує це у Firefox 5: jsfiddle.net/vhwJ5/2 .
Тім Даун

я майже впевнений, що user-selectстосується лише тексту та жодних інших елементів
олдбой

10

Здається, вибір користувачем 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;
    });
});

Ви можете використовувати селектор "img", але будьте обережні з "event.preventDefault ();" тому що жодні інші події, пов’язані з "mousedown", не працюватимуть на них на вашій сторінці ...
molokoloco

5

Я використовую cancelBubble=trueі stopPropagation()в миші вниз, і переміщую обробники.


2
Що мене зачепило, так це те, що вам це потрібно як в мишці, так і в обробниках переміщення, а не лише в русі!
Matthew Schinckel

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

Дякую за це, якийсь час шукав, як правильно заблокувати вибраний список, який я заблокував при натисканні, оскільки відключені значення не публікують ..... ха-ха
thekevshow

1

У вас є якесь прозоре зображення, яке ви вибрали? Зазвичай під час перетягування зображення з'являється піктограма "неможливо". В іншому випадку він зазвичай виділяє текст під час перетягування. Якщо так, можливо, доведеться поставити зображення за всім за допомогою z-index.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.