如何防止在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中双击选择文本的主要内容,如果未能解决你的问题,请参考以下文章