当双击 html 页面时，大多数浏览器会选择双击的单词（或三次单击的段落）。有没有办法摆脱这种行为？
请注意，我不想通过单击+拖动来禁用常规选择；即 jQuery UI 的 $('body').disableSelection() 和 document.onselectstart DOM 事件不是我想要的。
【问题讨论】：
标签： javascript jquery html selection
我担心您无法阻止选择本身成为浏览器的“本机行为”，但您可以在选择完成后立即清除：
<script type="text/javascript">
document.ondblclick = function(evt) {
if (window.getSelection)
window.getSelection().removeAllRanges();
else if (document.selection)
document.selection.empty();
}
</script>
编辑：也防止通过“三次单击”选择整个段落，这里是所需的代码：
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();
}
应该是跨浏览器，请报告任何不工作的浏览器。
【讨论】：
把这个放在css感兴趣的部分
-moz-user-select : none;
-khtml-user-select : none;
-webkit-user-select : none;
-o-user-select : none;
user-select : none;
【讨论】：
以下内容适用于当前的 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>MouseEvent.detail 属性跟踪 current click count，可用于确定事件是两次、三次还是更多点击。
不幸的是，Internet Explorer 不会在超时后重置计数器，因此您可以获得自页面加载以来用户点击次数的计数，而不是获取突发点击次数。
【讨论】：
如果您真的想在双击时禁用选择，而不是在之后删除选择（对我来说看起来很难看），您需要在第二个 mousedown 事件中return false（ondblclick won' t 工作，因为选择是在鼠标按下时进行的）。
**如果有人根本不想选择，最好的解决方案是像 Maurizio Battaghini 建议的那样使用 CSS user-select : none;。
// 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;
});
});
重要提示：我将灵敏度设置为 500 毫秒，但 双击灵敏度（检测为双击的两次单击之间的最大时间）可能因操作系统和浏览器而异，并且是通常是用户可配置的。 - api.jquery.com
在 Chrome 和 IE11 中测试。
【讨论】：
只是把它扔在那里，但这是我在我希望用户快速点击的页面中添加的代码。但是，这也会禁用标准的单击并拖动文本选择。
document.body.onselectstart = function() {
return false;
}
document.body.style.MozUserSelect = "none";
if (navigator.userAgent.toLowerCase().indexOf("opera") != -1) {
document.body.onmousedown = function() {
return false;
}
}
似乎对我很有效。
【讨论】：