禁用文字突出双击jQuery的

我有这个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":""}); } ); 

问题是,当我快点击,突出显示其中的文字。 有没有办法阻止文本突出显示?

我正在iPhone上写信,而不是在桌面上,但是一个快速的Google翻开了这个页面: 使用jQuery禁用文本select 。


回应“死链接”评论(来自@Herb Caudill)进行编辑。 虽然原来的链接确实已经死了,但这似乎是由于网站重组(而不是删除),文章的新位置可以在这里find: http : //chris-barr.com/index.php/进入/ disable_text_selection_with_jquery /

该文中提供的代码转载如下:

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

由chris-barr.com的Chris Barr编写的jQuery代码片段于2011年1月21 星期五访问。

如果你使用jQuery UI,你可以像这样简单的禁用文本select:

 $("body").disableSelection(); 

我使用非标准的CSS关键字user-select解决了这个问题:

 .unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } 
 //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); 

资源

我有同样的问题,这对我工作:

 li.noselection::selection { background-color: transparent; } 

我在Chrome,IE 7到10以及Firefox上testing了它。

PS这只会禁用“视觉效果”,文本仍然被选中。 我希望这就是为什么这是downvoted,因为如果你的问题只是美学,这个解决scheme工作100%。

使用1.9.x以上的jQuery版本

HTML

如上所示的html标记:

 <ul> <li>Go to the store</li> <li>Pick up dinner</li> <li>Debug crash</li> <li>Take a jog</li> </ul> 

JS

使用preventDefault()而不是返回false ,它不会杀死任何其他的处理程序

 $('li').on('selectstart', function (event) { event.preventDefault(); }); 

例如: jsFiddle

 window.getSelection().empty() 

在Chrome中工作正常,尽pipeselect的快速闪光,这是丑陋的。

 $( 'selector' ).on( 'selectstart', 'selector', function( ) { return false; }).css( 'MozUserSelect','none' ).mousedown( function( ) { return false; }); 

用你自己的replaceselect器 – 这个代码在所有的浏览器上都能正常工作。 使用.on()作为dynamic插入DOM的元素

 document.onselectstart = function() { return false; } document.onmousedown = function() { return false; }