Как я могу предотвратить выделение текста / элемента с помощью перетаскивания курсора

Я сделал управление подкачкой, и я заметил, что при нажатии на кнопки очень легко случайно выбрать отдельные изображения и текст. Можно ли это предотвратить?

для уточнения выбора я имею в виду выделение с помощью мыши. (Попробуйте перетащить мышь с одной стороны экрана на другую.)

при попытке выделить текст / элементы управления в этой сетке он не может быть выбран. Как это делается? ссылке

8 64
javascript jquery

8 ответов:

перетаскивание и выбор как инициализировать событие мыши вниз, так и обновление при последующих перемещениях мыши. Когда вы обрабатываете события, чтобы начать перетаскивание, или следовать за мышью, отмените пузырение события и переопределите возврат браузера по умолчанию:

что-то вроде этого в вашем начале перетаскивания mousedown и перемещения обработчиков -

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

для перетаскивания, вы захватываете mousedown и mousemove событий. (И, надеюсь,touchstart и touchmove события, а также для поддержки сенсорных интерфейсов.)

нужно позвонить event.preventDefault() и в down и move события для того, чтобы браузер не выбирал текст.

например (с помощью 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;
});
37

Я хотел прокомментировать, но у меня недостаточно репутации. Использование предложенной функции из @kennebec решило мою проблему в моей библиотеке перетаскивания javascript. Он работает безупречно.

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

Я вызвал его в своей пользовательской функции mousedown и mousemove, сразу же после того, как я могу распознать, я нажал на правильный элемент. Если я вызываю его только поверх функции, я просто убиваю любой щелчок по документу. Моя функция зарегистрирована как событие в документе.тело.

14

Это может быть достигнуто с помощью CSS в большинстве браузеров и unselectable expando в IE. Смотрите мой ответ здесь: Как отключить выделение текста с помощью CSS?

7

попробуйте это:

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

Это очень старый пост. Он может не отвечать точно на эту ситуацию, но я использую CSS для своего решения:

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

просто предотвратите его, вызвав функцию blur (), если она выбрана следующим образом :

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

Если вам нужно заблокировать выделение текста для определенного элемента с помощью JavaScript, то самым простым методом для меня было назначить стиль userSelect следующим образом:

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