Jak mogę zapobiec zaznaczaniu tekstu / elementu za pomocą przeciągania kursora

Zrobiłem kontrolkę stronicowania i zauważyłem, że klikając na przyciski bardzo łatwo jest przypadkowo zaznaczyć poszczególne obrazy i tekst. Czy można temu zapobiec?

Aby wyjaśnić wybór, mam na myśli podświetlanie myszką. (Spróbuj przeciągnąć mysz z jednej strony ekranu na drugą.)

Jeśli spróbujesz zaznaczyć tekst / elementy sterujące w tej siatce, nie można ich wybrać. Jak to się robi? Połączyć

przeciąganie i wybieranie zarówno inicjowania po naciśnięciu myszy, jak i aktualizacji przy kolejnych ruchach myszy. Kiedy obsługujesz zdarzenia, aby rozpocząć przeciąganie lub podążać za myszą, anuluj propagację zdarzenia i nadpisz domyślny zwrot przeglądarki:

coś takiego w swoim początku przeciągania myszy w dół i przenoszenia uchwytów-

e=e || window.event;
pauseEvent(e);

function pauseEvent(e){
    if(e.stopPropagation) e.stopPropagation();
    if(e.preventDefault) e.preventDefault();
    e.cancelBubble=true;
    e.returnValue=false;
    return false;
}

Do przeciągania przechwytujesz zdarzenia mousedowni mousemove. (I miejmy nadzieję touchstarti touchmovewydarzeń, a także, do interfejsów dotykowych wsparcie).

Musisz zadzwonić event.preventDefault()w obu downi movewydarzeń w celu utrzymania przeglądarkę od wyboru tekstu.

Na przykład (używając jQuery):

var mouseDown = false;
$(element).on('mousedown touchstart', function(event) {
  event.preventDefault();
  mouseDown = true;
});
$(element).on('mousemove touchmove', function(event) {
  event.preventDefault();
  if(mouseDown) {
    // Do something here.
  }
});
$(window.document).on('mouseup touchend', function(event) {
  // Capture this event anywhere in the document, since the mouse may leave our element while mouse is down and then the 'up' event will not fire within the element.
  mouseDown = false;
});

To jest bardzo stary post. Może nie odpowiadać dokładnie na tę sytuację, ale używam CSS do mojego rozwiązania:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Chciałem to skomentować, ale nie mam wystarczającej reputacji. Użycie sugerowanej funkcji z @kennebec rozwiązało mój problem w mojej bibliotece do przeciągania javascript. Działa bez zarzutu.

function pauseEvent(e){
    if(e.stopPropagation) e.stopPropagation();
    if(e.preventDefault) e.preventDefault();
    e.cancelBubble=true;
    e.returnValue=false;
    return false;
}

nazwałem to w funkcji niestandardowej Mousedown i Mousemove, natychmiast po rozpoznaniu kliknięcia odpowiedniego elementu. Jeśli wywołuję to tuż obok funkcji, po prostu zabijam każde kliknięcie dokumentu. Moja funkcja jest zarejestrowana jako zdarzenie w witrynie document.body.

Spróbuj tego:

document.onselectstart = function()
{
    window.getSelection().removeAllRanges();
};

Można to osiągnąć za pomocą CSS w większości przeglądarek i unselectablerozszerzenia w IE. Zobacz moją odpowiedź tutaj: Jak wyłączyć podświetlanie zaznaczenia tekstu za pomocą CSS?

po prostu temu zapobiegaj, wywołując funkcję blur () po wybraniu w następujący sposób:

 <input Value="test" onSelect="blur();">

Jeśli potrzebujesz zablokować zaznaczanie tekstu dla określonego elementu za pomocą JavaScript, to najprostszą metodą dla mnie było przypisanie stylu userSelect w następujący sposób:

var myElement = document.createElement('div');
myElement.style.userSelect = 'none';