JavaScript：通过双击禁用文本选择

Posted 2023-03-05

【中文标题】JavaScript：通过双击禁用文本选择

【英文标题】：JavaScript: Disable text selection via doubleclick

【发布时间】：2011-05-06 06:31:24

【问题描述】：

当双击 html 页面时，大多数浏览器会选择双击的单词（或三次单击的段落）。有没有办法摆脱这种行为？

请注意，我不想通过单击+拖动来禁用常规选择；即 jQuery UI 的 $('body').disableSelection() 和 document.onselectstart DOM 事件不是我想要的。

【问题讨论】：

不是我的决定。我正在为其编码的人想要这样。可能是因为该页面是浏览器游戏的一部分，并且一些增加/减少值的按钮（带有点击事件的 div）吸引用户双击，因为这比多次单击它们要快。如果这样选择的东西很烦人，看起来很奇怪。

***.com/questions/880512/…

【参考方案1】：

我担心您无法阻止选择本身成为浏览器的“本机行为”，但您可以在选择完成后立即清除：

<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();
​

Live test case.

应该是跨浏览器，请报告任何不工作的浏览器。

【讨论】：

谢谢，工作正常。即使我使用了一个匿名函数而不是给它一个名字——我认为这没有多大意义，因为它是立即分配的，不太可能在其他地方使用。

干杯，我同意你关于匿名函数的观点，给所有东西命名只是我的旧（坏？）习惯。 ://

但这是一种习惯，可以帮助调试器在您查看堆栈时知道函数的名称，而不是看到一堆匿名的。 FF 在猜测函数名方面要好得多，IE 对我的大多数堆栈都显示匿名

@Juan 谢谢，好点.. 当我必须调试时，我通常会使用警报，所以这并不重要。 :-)

@sleepycal 对您糟糕的用户体验感到抱歉，但您应该责怪网站所有者和/或坚持使用此类功能的客户，而不是攻击信使。

【参考方案2】：

把这个放在css感兴趣的部分

 -moz-user-select     : none;
 -khtml-user-select   : none;
 -webkit-user-select  : none;
 -o-user-select       : none;
 user-select          : none;

【讨论】：

请再次阅读问题：请注意，我不想通过单击+拖动来禁用常规选择

这似乎很完美。没有双。没有三重奏。没有选择..谢谢

@ThiefMaster 不要对我苛刻 :) 我不懂英语，我正在练习。我在阅读请求时出错了

虽然它没有回答问题，但正是我想要的，谢谢。

【参考方案3】：

以下内容适用于当前的 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 不会在超时后重置计数器，因此您可以获得自页面加载以来用户点击次数的计数，而不是获取突发点击次数。

【讨论】：

不确定这是否只是最近才突然成为可能，但这是提供完美解决方案的唯一答案。

【参考方案4】：

如果您真的想在双击时禁用选择，而不是在之后删除选择（对我来说看起来很难看），您需要在第二个 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;
    );
);

Live demo here

重要提示：我将灵敏度设置为 500 毫秒，但 双击灵敏度（检测为双击的两次单击之间的最大时间）可能因操作系统和浏览器而异，并且是通常是用户可配置的。 - api.jquery.com

在 Chrome 和 IE11 中测试。

【参考方案5】：

只是把它扔在那里，但这是我在我希望用户快速点击的页面中添加的代码。但是，这也会禁用标准的单击并拖动文本选择。

document.body.onselectstart = function() 
    return false;

document.body.style.MozUserSelect = "none";
if (navigator.userAgent.toLowerCase().indexOf("opera") != -1) 
    document.body.onmousedown = function() 
        return false;
    

似乎对我很有效。