Отключить выделение текста двойным щелчком мыши в 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":""});
          }
        );

Проблема заключается в том, что когда я делаю быстрый щелчок, он выделяет текст в нем. Есть ли способ остановить выделение текста?

Ответы

Ответ 1

Я пишу на iPhone, находясь далеко от стола, но быстрый Google поднял эту страницу: отключить выбор текста с помощью 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, chris-barr.com, доступ к которому осуществляется в пятницу, 21 ^st от января 2011 года.

Ответ 2

Если вы используете jQuery UI, вы можете отключить выбор текста так же просто:

$("body").disableSelection();

Ответ 3

Я решил это, используя нестандартное ключевое слово CSS user-select:

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

Ответ 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);

Источник

Ответ 5

У меня была такая же проблема, и это сработало для меня:

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

Я тестировал его на Chrome, Firefox, EDGE и IE с 7 до 10.

PS Это только отключает "визуальный эффект", текст по-прежнему выделяется. Я надеюсь, что именно поэтому за это проголосовали, потому что, если ваша проблема только эстетическая, это решение работает на 100%.

Ответ 6

Для работы с версией 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>

Используйте функцию preventDefault() вместо return false, которая не убивает других обработчиков, которые могут быть

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

Пример: jsFiddle

Ответ 7

window.getSelection().empty()

отлично работает в Chrome, хотя и с быстрой вспышкой выделения, что является уродливым.

Ответ 8

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

замените селектор на свой собственный - этот код отлично работает во всех браузерах. Использование .on() для элементов, динамически вставленных в DOM

Ответ 9

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