View Full Version : How to prevent text selection on doubleclick?

Mar 5th, 2007, 05:51 AM
I'm not sure if this question belongs to the JavaScript area, or to CSS, or to (D/X)HTML... Please let me know what you think.

Suppose we have this HTML:

<span class="pseudobutton">some text</span>
along with the following CSS:

span.pseudobutton { cursor: pointer; }

If one now views the results of this markup in Firefox, and doubleclicks on the text inside the span, some of this text will be selected. My question is: how can I disable this select-text-on-doubleclick behavior?

I know it is possible to do this, because Gmail does it all over the place (e.g. the "buttons" labeled "All", "None", etc., after the word Select: in the inbox).



Mar 5th, 2007, 08:47 AM
<style type="text/css">
span.pseudobutton { cursor: pointer; }

<span class="pseudobutton" id="pseudobutton">some text</span>

<script type="text/javascript">

spanObj = document.getElementById('pseudobutton');
spanObj.onselectstart = function()
return false;
spanObj.onmousedown = function()
return false;


Mar 5th, 2007, 04:21 PM
Thanks, chump2877! That one worked like a charm.

I did discover something interesting in this process. It's only useful for Mozilla-based browsers, but it may come in handy in other situations. One can achieve the desired effect on such browsers by setting the non-standard CSS parameter -moz-user-select to none. E.g.

span.pseudobutton {
cursor: pointer;
-moz-user-select: none;

In this case, your solution is far more general so this trick is not particularly useful, but looking into this -moz-user-select business I learned that Mozilla-based browsers control a whole bunch of GUI features via similar non-standard CSS parameters, listed here:


Oh, well. FWIW. It may come in handy some day...

BTW, I'm sure this is nothing new to the veteran programmers around here, but it may be useful to the greener ones among us. :)

Thanks again!