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

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

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

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

Ответы

Ответ 1

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

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

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

Ответ 2

Для перетаскивания вы захватываете события 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;
});

Ответ 3

Я хотел прокомментировать, но у меня недостаточно репутации. Используя предложенную функцию от @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 пользовательской функции, сразу после того, как я узнал, что я нажал на правый элемент. Если я назову его просто поверх функции, я просто удалю любой щелчок по документу. Моя функция зарегистрирована как событие на document.body.

Ответ 5

попробуйте следующее:

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

Ответ 6

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

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

Ответ 7

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

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