Запретить выбор текста после двойного щелчка

Ответ 1

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 {
    -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+ */
}

Ответ 2

В простом javascript:

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

Или с помощью jQuery:

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

Ответ 3

Чтобы предотвратить выделение текста ТОЛЬКО после двойного щелчка:

Вы можете использовать MouseEvent#detail свойство. Для событий mousedown или mouseup это 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

Ответ 4

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

Так вроде:

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

Ответ 5

Простая функция 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";
  }
}

Ответ 6

или, на mozilla:

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

В IE,

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

Ответ 7

Для тех, кто ищет решение для 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 продолжает работать как положено.

Ответ 8

Старый поток, но я придумал решение, которое, по моему мнению, более чистое, поскольку оно не отключает всех, даже связанных с объектом, и только предотвращает случайные и нежелательные варианты текста на странице. Это просто и хорошо работает для меня. Вот пример; Я хочу предотвратить выбор текста, когда я нажимаю несколько раз на объект с классом "стрелка вправо":

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

HTH!

Ответ 9

Чтобы не допустить, чтобы IE 8 CTRL и SHIFT отображали текст на отдельном элементе

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

Чтобы предотвратить выбор текста в документе

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

Ответ 10

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

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

Ответ 11

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