J'ai cette bascule jQuery. Ça marche 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 clique rapidement, le texte qu'il contient est surligné. Y a-t-il un moyen d'empêcher le texte d'être surligné?
J'écris sur iPhone alors que je suis loin du bureau, mais un rapide Google a ouvert cette page: désactive la sélection de texte avec jQuery .
Edited en réponse au commentaire 'dead link' (de @Herb Caudill). En effet, si le lien d'origine est mort, il semble être dû à une restructuration du site (plutôt qu'à son suppression) et le nouvel emplacement de l'article est disponible à l'adresse suivante: 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'
});
J'ai résolu ce problème en utilisant le mot clé non standard CSS user-select :
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
Si vous utilisez l'interface utilisateur jQuery, vous pouvez désactiver la sélection de texte aussi simple que cela:
$("body").disableSelection();
//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);
J'ai eu le même problème et cela a fonctionné pour moi:
li.noselection::selection {
background-color: transparent;
}
Je l'ai testé sur Chrome, IE de 7 à 10 et Firefox.
P.S. Cela ne désactive que "l'effet visuel", le texte est toujours sélectionné. J'espère que c'est la raison pour laquelle cela a été rejeté, car si votre problème n'est que esthétique, cette solution fonctionne à 100%.
Pour travailler avec la version 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 ()} _ à la place de (renvoie false) qui ne tue aucun autre gestionnaire que vous pourriez avoir.
$('li').on('selectstart', function (event) {
event.preventDefault();
});
Exemple: jsFiddle
$( 'selector' ).on( 'selectstart', 'selector', function( ) {
return false;
}).css( 'MozUserSelect','none' ).mousedown( function( ) {
return false;
});
remplacez le sélecteur par le vôtre - ce code fonctionne très bien sur tous les navigateurs. Utilisation de .on () pour les éléments insérés dynamiquement dans le DOM
document.onselectstart = function() { return false; }
document.onmousedown = function() { return false; }
window.getSelection().empty()
fonctionne bien dans Chrome, mais avec un éclair de la sélection, ce qui est moche.