4

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;
}
0

3 Answers 3

8

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/

4
  • 1
    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. Jun 14, 2013 at 21:54
  • 25
    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.
    – jbyrd
    Dec 29, 2016 at 20:47
  • Thanks @jdyrd, what a nightmare!
    – James
    Feb 17, 2018 at 12:44
  • 2
    @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!
    – Souleste
    Jun 21, 2019 at 16:06
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>

1

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");
  }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.