在jQuery中双击禁用文本突出显示[重复]答案

【问题标题】：disable text highlighting on double click in jQuery [duplicate]在jQuery中双击禁用文本突出显示[重复]
【发布时间】：2011-01-09 02:01:25
【问题描述】：

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

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

【问题讨论】：

“突出显示”是什么意思？如果您在切换期间单击，是否在列表项中选择了文本？
试着双击一个文本...你会明白我的意思...文本将被选中（突出显示）...我不希望文本被选中.. .
stackoverflow.com/questions/880512/…
请注意，上面@Aristoteles 的问题参考有一个正常工作的答案（尽管不是被接受的答案），与这个问题不同。在此基础上投票结束。
@Jules 感谢您的提醒！

标签： javascript jquery text

【解决方案1】：

我在 iPhone 上写字，而我不在办公桌前，但很快 Google 就打开了这个页面：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'
});

jQuery sn-p 由 Chris Barr, of chris-barr.com 编写，于 2011 年 1 月 21 日星期五访问。

【讨论】：

此链接已损坏，谁能告诉我们解决方案是什么？
$.browser 已被弃用，并且绑定到浏览器不支持的事件无论如何都没有坏处。所以我建议简单地将“selectstart”、“click”和“mousedown”绑定到一个返回false的函数。这也适用于 Mozilla，不需要 CSS 属性 MozUserSelect。
对我来说，一个快速的 Google 出现了 this 页面。
这可以防止任何文本选择，例如单击/拖动以突出显示
+1 到 @madbreaks 评论 - 这不能回答所提出的问题；它可以防止 all 文本选择，而不仅仅是双击选择。

【解决方案2】：

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

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

【讨论】：

除了你的回答，没有任何解决方案对我有用，谢谢
据我所知，这是最简单和最好的答案。注意还应使用标准化版本：user-select: none;
这会阻止任何选择，而不是简单地双击选择。

【解决方案3】：

如果你使用 jQuery UI，你可以像这样简单地禁用文本选择：

$("body").disableSelection();

【讨论】：

喜欢 jQuery UI :) 谢谢！
简单而有效。谢谢！ jQuery 1.9 中移除了浏览器检测方法。

【解决方案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

【讨论】：

谢谢...这成功了...但饭碗的建议更好...我只会给你+1。

【解决方案5】：

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

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

我从 7 点到 10 点在 Chrome、Firefox、EDGE 和 IE 上进行了测试。

附：这只会禁用“视觉效果”，文本仍会被选中。我希望这就是它被否决的原因，因为如果您的问题只是美学问题，那么这个解决方案 100% 有效。

【讨论】：

谢谢。这对我来说是完美的解决方案。

【解决方案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

【讨论】：

这会阻止任何文本选择，例如单击/拖动以突出显示
这只能防止 ul > li 文本的文本选择。请看一下小提琴进行测试

【解决方案7】：

window.getSelection().empty()

在 Chrome 中运行良好，尽管选择的快速闪现，这很难看。

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

【讨论】：

这可以防止任何文本选择，例如单击/拖动以突出显示