如何防止在 Javascript 中双击选择文本

How to prevent the double-click select text in Javascript

本文关键字：双击 选择 文本 Javascript 何防止      更新时间：2023-09-26

假设我在页面中有一个ul（li）列表：

<ul>
 <li>xxx<li>
 <li>xxx<li>
</ul>

元素li是可单击和可双击的，它们与这些事件一起附加，我在这两个事件中都return false。

$('ul li').on('click',function(){
    //do what I want
    return false;
}).on('dblclick',function(){
    //do what I want
    return false;
});

但是，当用户双击该元素时，将选择li中的文本。如何防止这种情况发生？

更新：

现在解决了，我用NiftyDude的css选择器使用以下代码：

$('ul li').on('click',function(){
    //do what I want
    return false;
}).....on('dragstart',function(){return false;}).on('selectstart',function(){return false;});
您可以使用

css禁用文本选择（请注意，这将有效地禁用所有选择方法，而不仅仅是双击）

ul li {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

http://jsfiddle.net/T3d7v/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;
document.ondblclick = function(evt) {
    ClearSelection();
    window.clearTimeout(_tripleClickTimer);
    //handle triple click selecting whole paragraph
    document.onclick = function() {
        ClearSelection();
    };
    _tripleClickTimer = window.setTimeout(function() {
           document.onclick = null; 
    }, 1000);
};
function ClearSelection() {
    if (window.getSelection)
        window.getSelection().removeAllRanges();
    else if (document.selection)
        document.selection.empty();
}

源/实时测试。

这应该适用于任何浏览器，请报告任何无法正常工作的浏览器。

相关文章：