Question

Interesting glitch. It turns out that if you try to use CSS to style the cursor (as in to hide or use a crosshair cursor), when you fire an onmousedown event, the cursor is changed to a text cursor.

Here’s a code snippet from the Experiment where I noticed this:

mouse=[[0,0],false];
snap_mouse_by=10;
canvas.onmousedown=function(evt){
    var X=evt.clientX,Y=evt.clientY;
    mouse[0]=[X-X%snap_mouse_by,Y%Y-snap_mouse_by];
    //set mouse coordinates
    mouse[1]=true;
    //set mouse is down to true
}

Along with this, a self-executing function runs and checks for the mouse coordinates and whether the mouse is down or not. Based on this data, it draws a box.

Of course, when I hit the mouse button, the cursor’s style goes to text instead of doing nothing.

No need to answer this question, answer is below.

Answer 1

I did a quick google search to see if I was doing the CSS wrong, or if there’s a documented bug.

I found nothing, but then got an idea that should seem pretty obvious.

canvas.onmousedown=function(evt){
    ...
    evt.preventDefault();
    return false;
}

I tested that out to see if it was a browser function causing the CSS inconsistency, and it worked like a charm, I now have full control of the cursor’s style.

Here’s the link, if anyone’s curious.

Just thought I’d share this in case anyone else runs into this glitch.