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

Posted

技术标签:

【中文标题】如何防止在Javascript中双击选择文本【英文标题】:How to prevent the double-click select text in Javascript 【发布时间】:2012-04-28 09:32:37 【问题描述】:

假设我在页面中有一个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;);

【问题讨论】:

附带说明,您可能想使用e.preventDefault() instead of return false 这不应该是一个解决方案,它只是你应该知道和做的事情。 ***.com/questions/880512/… return false; 与在事件处理程序 arg 上同时调用 preventDefault()stopPropagation() 相同。不过,也许最好的办法就是直接通过false/*....*/.on('dragstart selectstart', false); 【参考方案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/

【讨论】:

请注意,这将禁用所有选择方法,而不仅仅是双击。 @AndrewMarshall 谢谢马歇尔先生 :) @hguser 哪个版本的ie? 6/7?【参考方案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.

这应该适用于任何浏览器,请报告任何不工作的浏览器。

【讨论】:

是的,但是我会说你必须重新提出你的问题。如果您注意到,由于双击(和三次)单击而无法选择测试...这正是您想要的... 哦,我错了。我认为它可以防止 dbl-select 和 select。有用。谢谢。 您也想要阻止选择的东西吗?

以上是关于如何防止在Javascript中双击选择文本的主要内容,如果未能解决你的问题,请参考以下文章

怎样在winform中双击datagridview显示窗口

C# 中的 LinkLabel 在双击时复制其文本

在 Access 中双击 ListBox 转到特定记录

怎样实现在DBGrid中双击选择整行,并且可以多选?谢谢!!

在Excel VBA中双击执行宏

急!如何VB文件列表框双击文件名在文本框中显示文件内容?