在jQuery中双击禁用文本突出显示

Question

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

问题是当我快速点击时，它会突出显示其中的文字。 有没有办法阻止文本突出显示？

Answer 1

我正在iPhone上写字，而远离桌面，但很快谷歌就出现了这个页面：disable text selection with jQuery。

---

已编辑以响应“死链接”评论（来自@Herb Caudill）。虽然原始链接确实已经死亡，但似乎是由于网站重组（而不是删除），并且可以在此处找到该文章的新位置：http://chris-barr.com/index.php/entry/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, of chris-barr.com撰写的jQuery代码段，于2011年1月21日 ^st 访问。

Answer 2

如果您使用jQuery UI，则可以禁用文本选择，如下所示：

$("body").disableSelection();

Answer 3

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

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

Answer 4

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

Source

Answer 5

我遇到了同样的问题，这对我有用：

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

我在Chrome，Firefox，EDGE和IE上测试了它从7到10。

P.S。这仅禁用“视觉效果”，文本仍然被选中。我希望这就是为什么这个被低估了，因为如果你的问题只是美学，那么这个解决方案可以100％运行。

Answer 6

使用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（）而不是 return false ，它不会杀死你可能拥有的任何其他处理程序

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

示例：jsFiddle

Answer 7

window.getSelection().empty()

在Chrome中运行良好，虽然选择速度很快，但很难看。

Answer 8

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

用您自己的选择器替换选择器 - 此代码适用于所有浏览器。对于动态插入DOM的元素使用.on（）

Answer 9

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