如何防止双击在JavaScript中选择文本(How to prevent the double-c

2019-06-23 16:58发布

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

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

Answer 1:

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



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

来源/现场测试 。

这应该在任何浏览器中运行,请报告它不工作的任何浏览器。



文章来源: How to prevent the double-click select text in javascript