How do I prevent text and/or page content double-click highlighting in html and javascript?

Question

Kind of an odd question, but I have a game I am making for a Halloween party. Javascript/HTML for quick and dirty development. (This is going to be full screen on a projector and use a Wiimote for mouse control). This is what I am using, my question is not intended to invoke criticism of my code choice. It works great, except for one thing.

Basically, it is a shooting gallery/missile command style game where you need to click on or shoot objects as they move across the screen. I have onmousedown handlers for clicking on the objects. However, when you double click, i.e. fire rapidly, the object gets highlighted, as well as the other objects contained in the same div if you miss the object. To solve this, in the mousedown handler, I set focus/select a text box that is off of the page. This works to some extent, as the objects do not remain highlighted, but they do get highlighted briefly before they lose focus.

In short, is there a better way to prevent double-click from having this affect on my page?

Answer 1

I believe you should be able to avoid this issue by stopping the event's propagation. This should be possible to do by returning false from your mouse handlers.

Answer 2

From: http://stackoverflow.com/questions/880512/prevent-text-selection-after-double-click

* {
     -moz-user-select: none; // mozilla browsers
     -khtml-user-select: none; // webkit browsers
}

Answer 3

In Firefox, the highlighting can be stopped simply by having the event return false. IE is a little more complicated -- you have to have the element's 'onselectstart' function return false.

noHighlightObjects[i].onselectstart = function() {
            return false;
        };