JavaScript：通过双击禁用文本选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4117466/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript: Disable text selection via doubleclick
提问by ThiefMaster
When double-clicking on a html page most browsers select the word you double-click on (or the paragraph you triple-click on). Is there a way to get rid of this behavior?
双击 html 页面时，大多数浏览器会选择您双击的单词（或三次单击的段落）。有没有办法摆脱这种行为？
Note that I do not want to disable regular selection via single-click+dragging; i.e. jQuery UI's $('body').disableSelection()and the document.onselectstartDOM event are not what I want.
请注意，我不想通过单击+拖动来禁用常规选择；即 jQuery UI$('body').disableSelection()和document.onselectstartDOM 事件不是我想要的。
回答by Shadow Wizard is Ear For You
I fear you can't prevent the selection itself being "native behavior" of the browser, but you can clear the selection right after it's made:
我担心您无法阻止选择本身成为浏览器的“本机行为”，但是您可以在选择后立即清除选择：
<script type="text/javascript">
document.ondblclick = function(evt) {
if (window.getSelection)
window.getSelection().removeAllRanges();
else if (document.selection)
document.selection.empty();
}
</script>
Edit: to also prevent selecting whole paragraph by "triple click", here is the required code:
编辑：为了防止通过“三次单击”选择整个段落，这里是所需的代码：
var _tripleClickTimer = 0;
var _mouseDown = false;
document.onmousedown = function() {
_mouseDown = true;
};
document.onmouseup = function() {
_mouseDown = false;
};
document.ondblclick = function DoubleClick(evt) {
ClearSelection();
window.clearTimeout(_tripleClickTimer);
//handle triple click selecting whole paragraph
document.onclick = function() {
ClearSelection();
};
_tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000);
};
function RemoveDocumentClick() {
if (!_mouseDown) {
document.onclick = null;
return true;
}
_tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000);
return false;
}
function ClearSelection() {
if (window.getSelection)
window.getSelection().removeAllRanges();
else if (document.selection)
document.selection.empty();
}?
Should be cross browser, please report any browser where it's not working.
应该是跨浏览器，请报告任何无法正常工作的浏览器。
回答by Maurizio Battaghini
Just put this on the css interested section
把这个放在css感兴趣的部分
-moz-user-select : none;
-khtml-user-select : none;
-webkit-user-select : none;
-o-user-select : none;
user-select : none;
回答by kicken
The following works for me in the current Chrome (v56), Firefox (v51) and MS Edge (v38) browsers.
以下内容适用于当前的 Chrome (v56)、Firefox (v51) 和 MS Edge (v38) 浏览器。
var test = document.getElementById('test');
test.addEventListener('mousedown', function(e){
if (e.detail > 1){
e.preventDefault();
}
});<p id="test">This is a test area</p>The MouseEvent.detailproperty keeps track of the current click countwhich can be used to determine whether the event is a double, tripple, or more click.
该MouseEvent.detail物业保持跟踪的当前点击计数可用于确定事件是否是双，特里普尔，或点击。
Internet explorer unfortunately does not reset the counter after a timeout period so instead of getting a count of burst-clicks you get a count of how many times the user has clicked since the page was loaded.
遗憾的是，Internet Explorer 在超时时间后不会重置计数器，因此您不会获得突发点击次数，而是获得自页面加载以来用户点击次数的计数。
回答by pmrotule
If you really want to disableselection on double-click and not just remove the selection afterwards (looks ugly to me), you need to return falsein the second mousedown event (ondblclick won't work because the selection is made onmousedown).
如果您真的想在双击时禁用选择而不只是在之后删除选择（对我来说看起来很难看），您需要return false在第二个 mousedown 事件中（ondblclick 不起作用，因为选择是在mousedown 上进行的）。
**If somebody wants no selection at all, the best solution is to use CSS user-select : none;like Maurizio Battaghini proposed.
**如果有人根本不想要选择，最好的解决方案是使用user-select : none;像 Maurizio Battaghini 建议的CSS 。
// set to true if you want to disable also the triple click event
// works in Chrome, always disabled in IE11
var disable_triple_click = true;
// set a global var to save the timestamp of the last mousedown
var down = new Date().getTime();
var old_down = down;
jQuery(document).ready(function($)
{
$('#demo').on('mousedown', function(e)
{
var time = new Date().getTime();
if((time - down) < 500 &&
(disable_triple_click || (down - old_down) > 500))
{
old_down = down;
down = time;
e.preventDefault(); // just in case
return false; // mandatory
}
old_down = down;
down = time;
});
});
Important notice:I set the sensitivity to 500ms but Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.- api.jquery.com
重要提示：我将灵敏度设置为 500 毫秒，但双击灵敏度（被检测为双击的最大单击间隔时间）可能因操作系统和浏览器而异，并且通常是用户可配置的。- api.jquery.com
Tested in Chrome and IE11.
在 Chrome 和 IE11 中测试。
回答by Duncan
Just to throw this out there, but here's the code I slap into my pages where I expect users to be clicking rapidly. However, this will also disable standard click-n-drag text selection.
只是把它扔在那里，但这是我在我的页面中插入的代码，我希望用户能够快速点击。但是，这也会禁用标准的单击-拖动文本选择。
document.body.onselectstart = function() {
return false;
}
document.body.style.MozUserSelect = "none";
if (navigator.userAgent.toLowerCase().indexOf("opera") != -1) {
document.body.onmousedown = function() {
return false;
}
}
Seems to work well for me.
似乎对我来说效果很好。
