2

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.

However, 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-grab-right.cur),wait";
}

function chback ()
{
document.getElementById('firstspot').style.cursor = "url(img/cur/hand-point-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.

I 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.

user637563
  • 346
  • 3
  • 15
Stanley Was
  • 21
  • 3

1 Answers1

0

I think you should include a return false at the end of your 'onmousedown' and other event handlers. This should prevent 'event bubbling'.

Please see the following example: http://jsbin.com/ifitah/1/edit

user637563
  • 346
  • 3
  • 15
  • This doesn't work on Chrome. I'm looking for a solution, but Chrome and Firefox (not sure about others) act differently. In the above jsbin example Firefox works as expected. As soon as the mousedown event fires the cursor changes, on Chrome the cusor changes when the mouse is up, even though `document.body.style.cursor` is reporting the updated cursor graphic. – roskelld Oct 30 '18 at 20:20