Imiter "onselectstart = return false" en utilisant CSS ou une autre approche non-JS?

Question

J'ai créé une classe CSS de bouton qui utilise des images d'arrière-plan avec différentes positions pour afficher une image différente sur les états normal, mouseover et click. Une chose qui détruit complètement l'effet visuel est que si je clique plusieurs fois sur un tel lien et déplace la souris d'un pixel, le texte du lien est sélectionné.

est-il un moyen d'obtenir l'effet de

onselectstart = "return false;" 

sans avoir à préciser que pour chaque bouton? Une solution basée sur CSS serait parfaite, mais je ne peux pas y penser. Des idées? Une méthode consiste à parcourir chaque élément "button" à l'aide de prototype ou de JQuery et à définir manuellement l'événement onselectstart. Cependant, je suis allergique à Javascript quand ce n'est pas absolument nécessaire, et j'apprécierais toutes les idées non-JS.

Edit: J'ai trouvé une solution pour les navigateurs Mozilla:

-moz-user-select:none; 

Answer 1

Une chose détruire complètement l'effet visuel est que si je clique sur un lien à plusieurs reprises et déplace la souris juste un pixel, le texte du lien est sélectionné.

Est-ce vraiment un lien? Normalement, vous ne pouvez pas sélectionner le texte du lien.

Si vous utilisez par exemple. un div comme un faux-lien, peut-être vous devriez utiliser un lien à la place (si quelque part avec un vrai href), ou un bouton d'entrée si c'est juste pour le script (bien que cela nécessite un style pour perdre les styles par défaut du navigateur, ce qui est un peu pénible).

Sinon, Safari/Chrome réplicats/Konqueror propriété de Mozilla sous son propre nom:

-webkit-user-select: none; 
-khtml-user-select: none; 

Pour les autres navigateurs ont besoin d'une solution JavaScript. Remarque onselectstart renvoyer false est seulement suffisant dans IE et Safari/Chrome; pour Mozilla et Opera, il faudrait aussi retourner false onmousedown. Cela peut également arrêter le déclenchement de click, vous devrez donc faire tout ce que vous avez planifié pour le bouton dans le gestionnaire mousedown avant de retourner false, plutôt que onclick.

Vous pouvez bien sûr affecter ces gestionnaires à partir du script, pour éviter de bousiller le balisage, par exemple .:

<div class="button">...</div> 

.button { -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; } 

function returnfalse() { 
    return false; 
} 

var divs= document.getElementsByTagName('div'); 
for (var i= divs.length; i-->0;) 
    div.onselectstart= returnfalse;