Javascript 在 jQuery 中双击禁用文本突出显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2132172/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
disable text highlighting on double click in jQuery
提问by Reigel
I have this jQuery toggle. It work fine.
我有这个 jQuery 开关。它工作正常。
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);
The problem is when I do fast clicking, it highlighted the text in it. Is there a way to stop the text from being highlighted?
问题是当我快速点击时，它突出显示了其中的文本。有没有办法阻止文本突出显示？
回答by David says reinstate Monica
I'm writing on iPhone, while away from the desk, but a quick Google turned up this page: disable text selection with jQuery.
我正在 iPhone 上写作，而远离办公桌，但谷歌快速打开了这个页面：使用 jQuery 禁用文本选择。
Editedin response to the 'dead link' comment (from @Herb Caudill). While the original link is, indeed, dead, it appears to be due to a site restructuring (rather than removal) and the new location for the article can be found here: http://chris-barr.com/index.php/entry/disable_text_selection_with_jquery/
编辑响应（从@Herb考迪尔）的“死链接”评论。虽然原始链接确实已失效，但它似乎是由于站点重组（而不是删除）所致，文章的新位置可在此处找到：http: //chris-barr.com/index.php/条目/disable_text_selection_with_jquery/
And the code provided in that article is reproduced below:
该文章中提供的代码复制如下：
$(function(){
$.extend($.fn.disableTextSelect = function() {
return this.each(function(){
if($.browser.mozilla){//Firefox
$(this).css('MozUserSelect','none');
}else if($.browser.msie){//IE
$(this).bind('selectstart',function(){return false;});
}else{//Opera, etc.
$(this).mousedown(function(){return false;});
}
});
});
$('.noSelect').disableTextSelect();//No text selection on elements with a class of 'noSelect'
});
jQuery snippet written by Chris Barr, of chris-barr.com, as accessed on Friday, 21stof January, 2011.
由chris-barr.com的Chris Barr编写的 jQuery 片段，于 2011 年 1 月21日星期五访问。
回答by VisioN
If you use jQuery UI you can disable text selection as simple as that:
如果您使用 jQuery UI，您可以像这样简单地禁用文本选择：
$("body").disableSelection();
回答by Sjoerd
I solved this using the non-standard CSS keyword user-select:
我使用非标准 CSS 关键字user-select解决了这个问题：
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
回答by Alex Bagnolini
//function to be reused later
function clearSelection() {
var sel ;
if(document.selection && document.selection.empty){
document.selection.empty() ;
} else if(window.getSelection) {
sel=window.getSelection();
if(sel && sel.removeAllRanges)
sel.removeAllRanges() ;
}
}
$('p').click(clearSelection);
回答by nonzaprej
I had the same problem and this worked for me:
我遇到了同样的问题，这对我有用：
li.noselection::selection {
background-color: transparent;
}
I tested it on Chrome, Firefox, EDGE and IE from 7 to 10.
我在 Chrome、Firefox、EDGE 和 IE 上从 7 到 10 对其进行了测试。
P.S. This only disables the "visual effect", the text still gets selected. I hope that's why this got downvoted, because if your problem is only esthetical this solution works 100%.
PS 这只会禁用“视觉效果”，文本仍然被选中。我希望这就是为什么这被否决的原因，因为如果您的问题只是美学问题，则此解决方案 100% 有效。
回答by Lahmizzar
To work with jQuery version above 1.9.x
使用 1.9.x 以上的 jQuery 版本
HTML
HTML
The html markup as shown above:
html标记如上图：
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
JS
JS
Use preventDefault()instead of return falsewhich doesn't kill any other handlers you might have
使用preventDefault()而不是return false，这不会杀死您可能拥有的任何其他处理程序
$('li').on('selectstart', function (event) {
event.preventDefault();
});
Example: jsFiddle
示例：jsFiddle
回答by tim
window.getSelection().empty()
works fine in Chrome, albeit with a quick flash of the selection, which is ugly.
在 Chrome 中工作正常，尽管选择快速闪烁，这很丑陋。
回答by Mike Furlender
document.onselectstart = function() { return false; }
document.onmousedown = function() { return false; }
回答by pelister
$( 'selector' ).on( 'selectstart', 'selector', function( ) {
return false;
}).css( 'MozUserSelect','none' ).mousedown( function( ) {
return false;
});
replace the selector with your own - this code works fine on all browsers. Using .on() for elements inserted dynamically to the DOM
用您自己的选择器替换选择器 - 此代码适用于所有浏览器。对动态插入到 DOM 的元素使用 .on()
