Czy istnieje sposób, aby uniemożliwić wybór DIV?

Oto interesujące pytania dotyczące CSS!

Mam obszar tekstowy z przezroczystym tłem pokrywającym jakiś TEKST, którego chciałbym użyć jako rodzaju znaku wodnego. Tekst jest duży i zajmuje większość obszaru tekstu. Wygląda ładnie, problem polega na tym, że gdy użytkownik klika obszar tekstu, czasami wybiera zamiast tego tekst znaku wodnego. Chcę, aby tekst znaku wodnego nigdy nie był możliwy do wybrania. Spodziewałem się, że jeśli coś będzie niżej w indeksie z, nie będzie można go wybrać, ale przeglądarki nie przejmują się warstwami indeksu z podczas wybierania elementów. Czy jest jakaś sztuczka lub sposób, aby to zrobić, aby tego DIV nigdy nie można było wybrać?

Napisałem proste rozszerzenie jQuery, aby wyłączyć zaznaczanie jakiś czas temu: Wyłączanie zaznaczania w jQuery . Możesz go wywołać$('.button').disableSelection();

Alternatywnie, używając CSS (cross-browser):

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

Poniższy kod CSS działa w prawie nowoczesnej przeglądarce:

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

W przypadku IE musisz użyć JS lub wstawić atrybut w tagu html.

<div id="foo" unselectable="on" class="unselectable">...</div>

Po prostu zaktualizuję oryginalną, cieszącą się dużą popularnością odpowiedź aleemb z kilkoma dodatkami do css.

Używaliśmy następującej kombinacji:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Sugestię dodania wpisu webkit-touch otrzymaliśmy z:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

Kwiecień 2015: Aktualizuję własną odpowiedź, dodając wariację, która może się przydać. Jeśli chcesz sprawić, by DIV był wybierany / niewybieralny w locie i chcesz używać Modernizr , poniższe działa dobrze w javascript:

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

Jak już zasugerował Johannes, obraz tła jest prawdopodobnie najlepszym sposobem osiągnięcia tego w samym CSS.

Rozwiązanie JavaScript również musiałoby wpływać na „dragstart”, aby było skuteczne we wszystkich popularnych przeglądarkach.

JavaScript:

<div onselectstart="return false;" ondragstart="return false;">your text</div>

jQuery:

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

Bogaty

Możesz użyć pointer-events: none;w swoim CSS

div {
  pointer-events: none;
}

możesz spróbować tego:

<div onselectstart="return false">your text</div>

Czy zwykły obraz tła dla obszaru tekstowego nie wystarczyłby?

Przeglądarki WebKit (tj. Google Chrome i Safari) mają rozwiązanie CSS podobne do -moz-user-select Mozilli: brak

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

Również w IOS, jeśli chcesz pozbyć się szarych, półprzezroczystych nakładek pojawiających się po dotknięciu, dodaj css:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

Posługiwać się

onselectstart = "return false"

zapobiega kopiowaniu treści.

Upewnij się, że ustawiłeś pozycję jawnie jako bezwzględną lub względną, aby indeks Z działał przy wyborze. Miałem podobny problem i to rozwiązało go dla mnie.

Nie jestem pewien swojego przypadku użycia, ale możesz sprawić, że będzie można go przeciągać.