在jQuery中禁用双击文本高亮

Question

在jQuery中禁用双击文本高亮

53

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

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

- Reigel Gallarde

“highlighted”是什么意思？如果在切换期间单击，列表项中的文本是否被选中？ - Residuum

只需尝试双击文本...您就会明白我的意思...文本将被选择（高亮显示）...我不希望选择文本... - Reigel Gallarde

https://dev59.com/pnNA5IYBdhLWcg3wpfmu - Aristoteles

1

请注意，@Aristoteles 上面提到的问题有一个正确的答案（虽然不是被接受的），而这个问题没有。基于这个原因已经投票关闭了。 - Jules

@Jules 谢谢你提醒我！ - Reigel Gallarde

9个回答

37

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

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

- Sjoerd

除了你的答案，其他解决方案都对我无效，谢谢。 - Andrew Liu

这是我所见过的最简单和最好的答案。请注意，应该使用标准化版本：user-select: none;。 - andrewmu

1

这将防止任何选择，而不仅仅是双击选择。 - Lawrence Dol

36

如果你使用 jQuery UI，你可以非常简单地禁用文本选择：

$("body").disableSelection();

- VisioN

6

一定要喜欢jQuery UI :) 谢谢！ - Richard de Wit

3

简单而有效。谢谢！在 jQuery 1.9 中，浏览器检测方法已被删除。 - sirthomas

10

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

来源

- Alex Bagnolini

谢谢...这个方法行得通...但是ricebowl的建议更好...我会给你+1的。 - Reigel Gallarde

7

我曾经也遇到过同样的问题，以下方法对我有用：

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

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

注：这只是禁用了“视觉效果”，文本仍然可以被选择。我希望这就是为什么这个解决方案被投票降低的原因，因为如果你的问题只是美学方面，这个解决方案可以百分之百地工作。

- nonzaprej

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

5

要使用jQuery 1.9.x以上版本

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

- Lahmizzar

1

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

这将仅防止对_ul > li_文本进行文本选择。请查看fiddle以进行测试。 - Lahmizzar

0

window.getSelection().empty()

在Chrome中运行良好，尽管选择区域会快速闪烁，这看起来不太美观。

- tim

0

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

- Mike Furlender

1

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

0

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

将选择器替换为您自己的 - 此代码在所有浏览器上都可以正常工作。对于动态插入到DOM中的元素，请使用.on()。

- pelister

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Thomas · Accepted Answer

我正在使用 iPhone 写作，离开桌子，但快速谷歌搜索结果找到了这个页面：使用 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中禁用双击文本高亮

这是由Chris Barr编写的jQuery片段，于2011年1月21日星期五访问自chris-barr.com。