防止双击后选择文本

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

你也可以将这些样式应用到所有非ie浏览器和IE10的span上:

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

或者，在mozilla上:

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

即,

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

一个简单的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";
}
}

在纯javascript中:

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

或者使用jQuery:

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

为了防止ie8按CTRL和SHIFT点击文本选择个别元素

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

防止在文件上选择文本

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

防止双击后才选择文本:

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

See https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

旧线程，但我提出了一个解决方案，我认为是更干净的，因为它不禁用每个偶数绑定到对象，只防止随机和不需要的文本选择在页面上。这很简单，而且对我来说效果很好。 这里有一个例子;我想防止文本选择当我用类“arrow-right”在对象上单击几次:

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

HTH !

我也有同样的问题。我通过切换到<a>并添加onclick="return false;"来解决这个问题(这样点击它就不会向浏览器历史记录添加新的条目)。

如果你试图完全阻止通过任何方法以及仅双击选择文本，你可以使用user-select: none css属性。我已经在Chrome 68中进行了测试，但根据https://caniuse.com/#search=user-select，它应该在其他当前正常用户浏览器中工作。

从行为上看，在Chrome 68中，它是由子元素继承的，并且不允许选择元素包含的文本，即使该元素周围的文本已经被选中。

FWIW，我将user-select: none设置为那些子元素的父元素，我不希望在双击父元素的任何地方时以某种方式选中这些子元素。它确实有效!很酷的是contenteditable="true"，文本选择等仍然适用于子元素!

就像:

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

对于那些寻找角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输出继续按预期工作。

如果你使用的是Vue JS，只要将@mousedown.prevent=""附加到你的元素，它就会神奇地消失!

我知道这是一个老问题，但在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()告知不要这样做，这对我来说比在第一个地方防止事件冒泡更没有意义。

顺风CSS:

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