雙擊后防止文本選擇

Question

我正在我的網絡應用程序的跨度上處理 dblclick 事件。 一個副作用是雙擊會選擇頁面上的文本。 我怎樣才能防止這種選擇發生？

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

Answer 2

僅在雙擊后防止文本選擇：

您可以使用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);

 Some dummy text

請參閱https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

Answer 3

在純 JavaScript 中：

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

或者使用 jQuery：

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

Answer 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>

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

Answer 6

對於那些正在尋找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輸出繼續按預期工作。

Answer 7

如果您試圖完全防止通過任何方法以及僅雙擊來選擇文本，則可以使用user-select: none css 屬性。 我已經在 Chrome 68 中進行了測試，但根據https://caniuse.com/#search=user-select它應該可以在其他當前普通用戶瀏覽器中使用。

在行為上，在 Chrome 68 中，它由子元素繼承，並且不允許選擇元素包含的文本，即使選擇了圍繞並包含元素的文本。

Answer 8

或者，在 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

Answer 9

舊線程，但我想出了一個我認為更干凈的解決方案，因為它不會禁用每個甚至綁定到對象，並且只會防止頁面上的隨機和不需要的文本選擇。 這很簡單，對我來說效果很好。 這是一個例子； 當我在具有“右箭頭”類的對象上單擊幾次時，我想阻止文本選擇：

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

！

Answer 10

如果您使用的是 Vue JS，只需將@mousedown.prevent=""附加到您的元素，它就會神奇地消失！

Answer 11

為了防止 IE 8 CTRL 和 SHIFT 單擊單個元素上的文本選擇

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

防止在文檔上選擇文本

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

Answer 12

我知道這是一個老問題，但它在 2021 年仍然完全有效。但是，我在答案方面缺少的是對Event.stopPropagation()的任何提及。

OP 要求dblclick事件，但據我所知， pointerdown事件也會出現同樣的問題。 在我的代碼中，我注冊了一個監聽器，如下所示：

this.addEventListener("pointerdown", this._pointerDownHandler.bind(this));

偵聽器代碼如下所示：

_pointerDownHandler(event) {
  // Stuff that needs to be done whenever a click occurs on the element
}

在我的元素上快速單擊多次會被瀏覽器解釋為雙擊。 根據您的元素在頁面上的位置，雙擊將選擇文本，因為這是給定的行為。

您可以通過在偵聽器中調用Event.preventDefault()來禁用該默認操作，這確實解決了問題，至少在某種程度上是這樣。

但是，如果您在元素上注冊一個偵聽器並編寫相應的“處理”代碼，您不妨吞下Event.stopPropagation()確保的事件。 因此，處理程序將如下所示：

_pointerDownHandler(event) {
  event.stopPropagation();
  // Stuff that needs to be done whenever a click occurs on the element
}

因為我的元素已經使用了該事件，所以層次結構中更靠前的元素不知道該事件，也不會執行它們的處理代碼。

如果您讓事件冒泡，層次結構中較高的元素都會執行它們的處理代碼，但被Event.preventDefault()告知不要這樣做，這對我來說比首先防止事件冒泡更有意義.

Answer 13

順風 CSS：

<div class="select-none ...">
  This text is not selectable
</div>

Answer 14

我有同樣的問題。 我通過切換到<a>並添加onclick="return false;"來解決它 （這樣點擊它就不會在瀏覽器歷史記錄中添加新條目）。