Prevent double/triple click selection with js button

I have a button, created by using a <span> that I’ve added a click event to (I’m using mootools, if it matters). It works fine and all, but the only problem is that it’s an inline button and is used to increase a value (it’s a plus button basically). I find myself clicking it rapidly to increase the value to what I desire - unfortunately, this triggers the built-in browser selection, and the rest of the “paragraph” that the button resides in is selected. (For normal selection, double clicking selects the clicked word, triple clicking selects the entire paragraph.)

Is there any way I can avoid this? Thanks in advance! (Not sure if this is right in the css section, not really js but maybe just HTML?)


If you make it a link and prevent the default action with return false it wont be selected when clicked. A span is a normal textual element and will trigger selection in browsers.

woo thanks a ton - it should be alright if I just leave the href blank, right? or does that not valid code?

Yes it’s valid to have an empty anchor (on hte href part I mean).

However users will get that hand and they will expect that link to go somewhere…so you could also give the anchor a “cursor:default”

Also, you could give the anchor href=“javascript:;” to make it not empty :). That’s all I have to say on it.

With my web standards hat on I would make sure the content is still accessible without js.
If this means creating a new content page and linking to that then that’s what I would do.

<a href="dynamic-content.html" onclick="doDnyamicMagic(); return false;">linky linky</a>

href=“javascript:;” and href=“#” are abuses of the anchor as I see it.

isn’t abuse of the anchor at all. When used correctly (not in this case) it actually provides a very useful feature to the users allowing them to jump to any content section :).

I didn’t say href=“#myIdentifyingID” was an abuse :wink:

Using an <a> tag when the href attribute doesn’t go somewhere meaningful for those without JavaScript enabled is an abuse of the <a> tag - unless you add the tag into the page using JavaScript so that those without JavaScript can’t see it at all.