How to change mouse cursor on mousedown event

Question

I want to hold the mouse down and have its cursor change to an image. Then when I release the mouse I want it to rever back to its default.

Here is the code I have thus far. It does not work unless you right click then left-mousedown. Weird.

http://jsfiddle.net/HLLNN/

JQUERY

$("#background").on("mousedown", function () {
    $(this).addClass("mouseDown");
}).on("mouseup", function () {
    $(this).removeClass("mouseDown");
});

CSS

.mouseDown{
 cursor:progress  ; // I will eventually want an image file but I used this for brevity

}


#background{
    width:500px;
    height:500px;
    position:absolute;
    background-color:red;
}

Solution 1

Well there is 2 things.

First, you have to prevent default. The default behavior is the drag (text selection) wich override your cursor.

$("#background").on("mousedown", function (e) {
    e.preventDefault();
    $(this).addClass("mouseDown");
}).on("mouseup", function () {
    $(this).removeClass("mouseDown");
});

Second, while your mouse is down, you need to move the cursor else it doesnt work. I don't know why and didnt find a fix yet.

Anyway, check this fiddle : http://jsfiddle.net/HLLNN/3/

Solution 2

it seems that sometimes there are strange conditions, where Crome does not properly changes cursor after mousedown. I also have the situatin where cursor has changed shortly only in a moment after mouseup event :(

But the pure example in https://jsfiddle.net/romleon/429rf1tb/ works fine

var moved=document.getElementsByClassName('moved')[0]
moved.onmousedown = function(){
  moved.classList.add('do_move')
}
 moved.onmouseup = function(){
  moved.classList.remove('do_move')
}

.moved{  
    position: absolute;
    width:111px;
    height:55px;
    background-color: blue;
}
.moved:hover {cursor: pointer;}
.moved.do_move:hover {cursor: crosshair;}

<div class='moved'>
</div>

Solution 3

Adding a return false; to the end of mousedown also helps.

$("#background").on({
  "mousedown": function (e) {
    $(this).addClass("mouseDown");
    return false; //added this
  },
  "mouseup": function () {
    $(this).removeClass("mouseDown");
  }
});

Comments

[Abhijeet kumar sharma]

Mouse move problem occurs with chrome only. On other browser this code is working fine. Even without using e.preventDefault() this code is working with other browsers.

[jbyrd]

I just discovered there's only a problem in Chrome when you have the developer tools open. If you close it, it should work fine.

[James]

Thanks @jdyrd, what a nightmare!

[Souleste]

@jbyrd That is such an odd problem. I have been trying to get my mouse events to work properly for hours, they were only working when I stayed on the page, but it I went to another page and came back they would not work. Once I read your comment and closed out of devtools it worked perfectly. Thank you!