Question

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

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

Answer 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

应该是跨浏览器，请报告任何无效的浏览器。

Answer 2

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

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

Answer 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在超时期限后没有重置计数器，因此您不需要计算突发点击次数，而是计算用户自页面加载以来点击的次数。

Answer 4

如果你真的想要双击禁用选项，而不仅仅是之后删除选择（看起来很难看），你需要在第二个mousedown事件中return false（ondblclick将不起作用，因为选择是在mousedown上进行的。）

**如果有人不想选择，最好的解决方案是使用像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中测试过。

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

似乎对我有用。

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

5 个答案: