Як я можу запобігти виділенню тексту / елемента за допомогою перетягування курсору

Я зробив керування підкачкою і помітив, що, натискаючи на кнопки, дуже легко випадково вибрати окремі зображення та текст. Чи можна запобігти цьому?

Для уточнення вибору я маю на увазі виділення за допомогою миші. (Спробуйте перетягнути мишу з одного боку екрана на інший.)

Якщо ви намагаєтеся виділити текст / елементи керування в цій сітці, його неможливо вибрати. Як це робиться? Посилання

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

щось подібне у вашому розпочатому перетягуванні миші та переміщенні обробників-

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

Для перетягування ви фіксуєте події 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;
});

Це дуже стара публікація. Це може не відповісти точно в цій ситуації, але я використовую CSS для свого рішення:

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

Я хотів прокоментувати, але у мене недостатньо репутації. Використання запропонованої функції від @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.

спробуйте це:

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

Цього можна досягти за допомогою CSS у більшості браузерів та unselectableрозширення в IE. Дивіться мою відповідь тут: Як вимкнути виділення тексту виділенням за допомогою CSS?

просто запобігайте цьому, викликаючи функцію blur (), якщо вибрано наступне:

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

Якщо вам потрібно заблокувати виділення тексту для певного елемента за допомогою JavaScript, то найпростішим методом для мене було призначити стиль userSelect таким:

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