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

时间:2012-04-17 03:10:57

标签: javascript javascript-events click textselection

说我在页面中有一个ulli)列表:

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

元素li是可点击的,可双击,它们附有这些事件,而我return false。{/ p>

$('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;});

2 个答案:

答案 0 :(得分:19)

您可以使用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/

答案 1 :(得分:2)

您无法阻止选择发生,但您可以在选择后立即清除选择:

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

Source/Live test

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