Désactiver la mise en évidence du texte en cas de double-clic en jQuery

Question

J'ai cette bascule jQuery. Il fonctionne bien.

   <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":""});
          }
        );

Le problème est que lorsque je fais un clic rapide, le texte est mis en évidence. Existe-t-il un moyen d'empêcher le texte d'être mis en évidence ?

Answer 1

J'écris sur mon iPhone, loin de mon bureau, mais une recherche rapide sur Google m'a permis de trouver cette page : désactiver la sélection de texte avec jQuery .

---

Modifié en réponse au commentaire sur le "lien mort" (de @Herb Caudill). Si le lien original est effectivement mort, il semble que cela soit dû à une restructuration du site (plutôt qu'à sa suppression) et le nouvel emplacement de l'article se trouve ici : http://chris-barr.com/index.php/entry/disable_text_selection_with_jquery/

Et le code fourni dans cet article est reproduit ci-dessous :

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

Un extrait de jQuery écrit par Chris Barr, de chris-barr.com consulté le vendredi 21 st de janvier 2011.

Answer 2

J'ai résolu ce problème en utilisant le mot clé CSS non standard sélection par l'utilisateur :

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

Answer 3

Si vous utilisez jQuery UI, vous pouvez désactiver la sélection de texte aussi simplement que cela :

$("body").disableSelection();

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

Fuente

Answer 5

Pour fonctionner avec une version de jQuery supérieure à 1.9.x

HTML

Le balisage html comme indiqué ci-dessus :

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

JS

Utilisez preventDefault() au lieu de retournez à la case départ ce qui ne tue pas les autres gestionnaires que vous pourriez avoir.

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

Exemple : jsFiddle