Imitate "onselectstart=return False" Using Css Or Other Non-js Approach?

I have created a button CSS class that uses background images with different positions to display a different image on normal, mouseover, and click states. One thing completely de

Solution 1:

One thing completely destroying the visual effect is that if I click such a link repeatedly and move the mouse just a pixel, the link text gets selected.

Is it really a link? Normally you cannot select link text.

If you are using eg. a div as a faux-link, perhaps you ought to use a link instead (if it goes somewhere with a real href), or an input-button if it's just for scripting (although this requires some styling to lose the browser default styles, which is a bit of a pain).

Otherwise, Safari/Chrome/Konqueror replicates Mozilla's property under its own name:

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

For other browsers you need a JavaScript solution. Note onselectstart returning false is only sufficient in IE and Safari/Chrome; for Mozilla and Opera one would also have to return false onmousedown. This may also stop the click firing, so you would have to do whatever script stuff you have planned for the button in the mousedown handler before returning false, rather than onclick.

You can of course assign those handlers from script, to avoid messing up the markup, eg.:

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

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

function returnfalse() {
    returnfalse;
}

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