Zapobiegaj selekcji w HTML

82

Mam element div na stronie HTML i za każdym razem, gdy naciskam mysz i poruszam nim, pokaże się, że kursor „nie można upuścić”, jakby coś zaznaczał. Czy istnieje sposób na wyłączenie wyboru? Próbowałem wybierać przez użytkownika CSS bez żadnego sukcesu.

javascript html selection

— Wieża
źródło

166

Zastrzeżone odmiany user-selectbędą działać w większości nowoczesnych przeglądarek:

*.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;
}

W przypadku IE <10 i Opery będziesz musiał użyć unselectableatrybutu elementu, którego nie można wybrać. Możesz to ustawić za pomocą atrybutu w HTML:

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

Niestety ta właściwość nie jest dziedziczona, co oznacza, że musisz umieścić atrybut w tagu początkowym każdego elementu wewnątrz <div>. Jeśli jest to problem, możesz zamiast tego użyć JavaScript, aby zrobić to rekurencyjnie dla elementów podrzędnych elementu:

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

— Tim Down
źródło

nie jest zaznaczony, ale nadal jest kopiowany do schowka (zgodnie ze specyfikacją MDC na goo.gl/5P8uH )

— ithkuil

@ithkuil: Interesujące. Wygląda na -moz-noneto, że jest do zrobienia. Poprawię swoją odpowiedź.

— Tim Down

-moz-noneWydaje się , że w Firefoksie 5 nie jest automatycznie none-moz-user-select: none

— uzupełniany przez Firebuga,

@Lekensteyn: Oba działają, aby zapobiec selekcji, ale teoretycznie istnieje różnica: developer.mozilla.org/en/CSS/-moz-user-select . Jednak wydaje się, że poniższa kopia nie zawiera kopii zapasowej w przeglądarce Firefox 5: jsfiddle.net/vhwJ5/2 .

— Tim Down

jestem prawie pewien, że user-selectzajmuje się tylko tekstem, a nie innymi elementami

— oldboy

10

Wygląda na to, że wybór użytkownika CSS nie zapobiega przeciąganiu i upuszczaniu obrazu ... więc ...

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

— molokoloco
źródło

Możesz użyć selektora "img", ale zachowaj ostrożność z "event.preventDefault ();" ponieważ żadne inne zdarzenia związane z "mousedown" nie będą działać na Twojej stronie ...

— molokoloco

5

Używam cancelBubble=truei stopPropagation()myszy w dół i przesuwam handlerów.

— kennebec
źródło

2

Zaskoczyło mnie to, że potrzebujesz go zarówno do obsługi myszy w dół, jak i do przenoszenia, a nie tylko do przenoszenia!

— Matthew Schinckel,

4

event.preventDefault() wydaje się działać (testowane w IE7-9 i 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);
    });
});

— liść
źródło

Dziękuję za to, szukałem przez chwilę na prawidłowym sposobie blokowania listy wyboru I blokowałem po kliknięciu, ponieważ wyłączone wartości nie

— wysyłają

1

Czy masz jakiś przezroczysty obraz, który wybierasz? Zwykle ikona „nie można upuścić” pojawia się podczas przeciągania obrazu. W przeciwnym razie zwykle zaznacza tekst podczas przeciągania. Jeśli tak, być może będziesz musiał umieścić obraz za wszystkim, używając indeksu z.

— Michał Ciechan
źródło