onmousedown change cursor problem that might need event bubbling control

[Stanley Was]

For one of my projects, I need to change a custom cursor onmousedown and change it back onmouseup and onmouseout. For the moment, I am only interested in making it work for Chrome and will see about different browsers later.

So I started with the following code.

html:

    <div id="firstspot"></div>

css:

#firstspot {
    position:absolute;
    width:145px;
    height:145px;
    margin-left:58px;
    top:144px;
    cursor:url(img/cur/hand-point-right.cur),wait;
}

#firstspot:active {
    cursor:url(img/cur/hand-grab-right.cur),wait;
}

The desired change seems to happen only after I move the mouse minimally once, for if I move the mouse more extensively, the cursor defaults to a "text" cursor, whereas if I try an onmousedown change for a background image instead of the cursor, it does work onmousedown!
~~~~~~~~~~~~~~~~

Next, I tried to get the desired effect with the following code using javascript:
html:

    <div id="firstspot" onmousedown="chcursor();" onmouseup="chback();" onmouseout="chback();"></div>

css:

#firstspot {
    position:absolute;
    width:145px;
    height:145px;
    margin-left:58px;
    top:144px;
    cursor:url(img/cur/hand-point-right.cur),wait;
}

javascript:

function chcursor ()
{
	document.getElementById('firstspot').style.cursor = "url(img/cur/hand-point-right.cur),wait";
}

function chback ()
{
	document.getElementById('firstspot').style.cursor = "url(img/cur/hand-grab-right.cur),wait";
}

This produced practically the same delayed effect, while the addition of onmouseup and onmouseout work perfectly. Thus the grabbing hand cursor is again only visible after one minimalistic move of the mouse after the mousedown.
~~~~~~~~~~~~~~~~~~~~`

Research revealed something called event bubbling. I would like to start testing/controlling this phenomenon and was hoping that somebody could point me in the right direction.
So far, I have encountered "cannot be done" and have not been able to create the desired cursor change.

If prefer pure javascript solutions over the use of js libraries (why add kilos of a library for a solution that may only need a few lines of js?), but will be grateful for either.

P.S. Please, keep in mind that I am not a professional web developer.

[toicontien]

I wonder if the cursor isn't updating because of a screen redraw bug. Try setting the visibility to hidden and back after changing the cursor:

function chcursor (element)
{
	element.style.cursor = "url(img/cur/hand-point-right.cur),wait";
	element.style.visibility = "hidden";
	element.style.visibility = "";
}

function chback (element)
{
	element.style.cursor = "url(img/cur/hand-grab-right.cur),wait";
	element.style.visibility = "hidden";
	element.style.visibility = "";
}

Then, to make your code simpler and reusable, change the HTML to:

<div id="firstspot" onmousedown="chcursor(this);" onmouseup="chback(this);" onmouseout="chback(this);"></div>

[Stanley Was]

Cheers anyway, if only for teaching me how to create re-usable js functions.