Запрет выделения текста после двойного щелчка
Я обрабатываю событие dblclick на промежутке в моем веб-приложении. Побочным эффектом является то, что двойной щелчок выделяет текст на странице. Как я могу предотвратить этот выбор?
14 ответов
function clearSelection() {
if(document.selection && document.selection.empty) {
document.selection.empty();
} else if(window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
}
}
Вы также можете применить эти стили к span для всех браузеров не 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+ */
}
Чтобы предотвратить выделение текста ТОЛЬКО после двойного щелчка:
Вы могли бы использовать 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
В простом JavaScript:
element.addEventListener('mousedown', function(e){ e.preventDefault(); }, false);
Или с помощью jQuery:
jQuery(element).mousedown(function(e){ e.preventDefault(); });
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) event.preventDefault();
}
public onDblClick(mouseEvent: MouseEvent) {
// todo: do what you really want to do ...
}
dblclick вывод продолжает работать как положено.
Если вы пытаетесь полностью запретить выделение текста любым способом, а также только двойным щелчком, вы можете использовать user-select: none атрибут css. Я тестировал в Chrome 68, но, согласно https://caniuse.com/, он должен работать в других современных браузерах обычных пользователей.
Поведенчески, в Chrome 68 он наследуется дочерними элементами и не позволяет выделять текст, содержащийся в элементе, даже если был выбран текст, окружающий и включающий элемент.
Или на 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
Чтобы запретить IE 8 CTRL и SHIFT, нажмите выделение текста на отдельном элементе.
var obj = document.createElement("DIV");
obj.onselectstart = function(){
return false;
}
Для предотвращения выделения текста в документе
window.onload = function(){
document.onselectstart = function(){
return false;
}
}
Если вы используете Vue JS, просто добавьте @mousedown.prevent="" к вашей стихии, и она волшебным образом исчезнет!
Старый поток, но я придумала решение, которое я считаю более чистым, поскольку оно не отключает все, даже привязанные к объекту, а только предотвращает случайный и нежелательный выбор текста на странице. Это просто и хорошо работает для меня. Вот пример; Я хочу запретить выделение текста, когда я нажимаю несколько раз на объекте с классом "стрелка вправо":
$(".arrow-right").hover(function(){$('body').css({userSelect: "none"});}, function(){$('body').css({userSelect: "auto"});});
HTH!
Я знаю, что это старый вопрос, но он по-прежнему актуален в 2021 году. Однако в плане ответов мне не хватает любого упоминания о .
OP просит
this.addEventListener("pointerdown", this._pointerDownHandler.bind(this));
Код слушателя выглядит следующим образом:
_pointerDownHandler(event) {
// Stuff that needs to be done whenever a click occurs on the element
}
Быстрое многократное нажатие на мой элемент интерпретируется браузером как двойной щелчок. В зависимости от того, где находится ваш элемент на странице, при двойном щелчке будет выделен текст, потому что это заданное поведение.
Вы можете отключить это действие по умолчанию, вызвавв слушателе , который делает решить эту проблему, по крайней мере , в некотором смысле.
Однако, если вы зарегистрируете слушателя на элементе и напишете соответствующий «обрабатывающий» код, вы также можете проглотить это событие, которое
_pointerDownHandler(event) {
event.stopPropagation();
// Stuff that needs to be done whenever a click occurs on the element
}
Поскольку событие было поглощено моим элементом, элементы, расположенные дальше по иерархии, не знают об этом событии и не будут выполнять свой код обработки.
Если вы позволите событию всплыть, все элементы выше в иерархии будут выполнять свой код обработки, но им будет сказано не делать этого с помощью
Попутный ветер CSS:
<div class="select-none ...">
This text is not selectable
</div>
У меня такая же проблема. Я решил это, переключившись на <a> и добавить onclick="return false;" (чтобы клик по нему не добавлял новую запись в историю браузера).