Не допускати вибору тексту після подвійного клацання

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

function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
}

Ви також можете застосувати ці стилі до інтервалу для всіх браузерів, які не входять до IE, та IE10:

span.no_selection {
    user-select: none; /* standard syntax */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

У простому javascript:

element.addEventListener('mousedown', function(e){ e.preventDefault(); }, false);

Або з jQuery:

jQuery(element).mousedown(function(e){ e.preventDefault(); });

Щоб запобігти вибору тексту ТІЛЬКИ після подвійного клацання:

Ви можете використовувати MouseEvent#detailмайно. Для подій у миші та миші це 1 плюс поточна кількість кліків.

document.addEventListener('mousedown', function (event) {
  if (event.detail > 1) {
    event.preventDefault();
    // of course, you still do not know what you prevent here...
    // You could also check event.ctrlKey/event.shiftKey/event.altKey
    // to not prevent something useful.
  }
}, false);

Дивіться https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

FWIW, я поставив user-select: noneна батьківський елемент цих дочірніх елементів , які я не хочу як - то вибирається при подвійному натисканні в будь-якому місці батьківського елементу. І це працює! Класна річ єcontenteditable="true" , що підбір тексту і т. Д. Все ще працює над дочірніми елементами!

Так, як:

<div style="user-select: none">
  <p>haha</p>
  <p>haha</p>
  <p>haha</p>
  <p>haha</p>
</div>

Проста функція Javascript, яка робить вміст всередині елемента сторінки невибірним:

function makeUnselectable(elem) {
  if (typeof(elem) == 'string')
    elem = document.getElementById(elem);
  if (elem) {
    elem.onselectstart = function() { return false; };
    elem.style.MozUserSelect = "none";
    elem.style.KhtmlUserSelect = "none";
    elem.unselectable = "on";
  }
}

Для тих, хто шукає рішення для Angular 2+ .

Можна використовувати mousedownвихід клітинки таблиці.

<td *ngFor="..."
    (mousedown)="onMouseDown($event)"
    (dblclick) ="onDblClick($event)">
  ...
</td>

І запобігти, якщо detail > 1.

public onMouseDown(mouseEvent: MouseEvent) {
  // prevent text selection for dbl clicks.
  if (mouseEvent.detail > 1) mouseEvent.preventDefault();
}

public onDblClick(mouseEvent: MouseEvent) {
 // todo: do what you really want to do ...
}

dblclickВихід продовжує працювати , як очікувалося.

або, на мозіллі:

document.body.onselectstart = function() { return false; } // Or any html object

На IE,

document.body.onmousedown = function() { return false; } // valid for any html object as well

Старий потік, але я придумав рішення, яке, на мою думку, є більш чистим, оскільки воно не вимикає кожен рівний прив’язаний до об’єкта, а лише запобігає випадковим і небажаним виділенням тексту на сторінці. Це прямо і добре працює для мене. Ось приклад; Я хочу запобігти виділенню тексту, коли кілька разів натискаю на об'єкт класом "стрілка-право":

$(".arrow-right").hover(function(){$('body').css({userSelect: "none"});}, function(){$('body').css({userSelect: "auto"});});

HTH!

Якщо ви намагаєтесь повністю запобігти вибору тексту будь-яким методом, а також лише подвійним клацанням, ви можете використовувати user-select: noneатрибут css. Я протестував у Chrome 68, але відповідно до https://caniuse.com/#search=user-select він повинен працювати в інших поточних звичайних веб-переглядачах користувачів.

Поведінково, в Chrome 68 він успадковується дочірніми елементами, і він не дозволяє вибирати текст, що міститься в елементі, навіть якщо був обраний текст, що оточує та включає елемент.

Для запобігання IE 8 CTRL і SHIFT натисніть на вибір тексту на окремому елементі

var obj = document.createElement("DIV");
obj.onselectstart = function(){
  return false;
}

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

window.onload = function(){
  document.onselectstart = function(){
    return false;
  }
}

У мене була така ж проблема. Я вирішив це шляхом переключення на <a>та додавання onclick="return false;"(так що натискання на нього не додасть новий запис до історії браузера).