如何在mousedown事件上更改鼠标光标

Question

我希望按住鼠标时，它的光标能够变成一张图片。当我松开鼠标时，它应该恢复默认状态。

以下是我目前所写的代码。除非您右键单击，然后左键按下，否则它不起作用。奇怪。

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

- William

Answer 1

有两件事情需要注意。

首先，您需要阻止默认行为。默认行为是拖动（文本选择），会覆盖您的光标。

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

其次，在按下鼠标时，需要移动光标才能使它起作用。我不知道为什么，也没有找到解决方法。

无论如何，可以查看这个fiddle：http://jsfiddle.net/HLLNN/3/

- Karl-André Gagnon

---

只有在Chrome浏览器中才会出现鼠标移动问题。在其他浏览器中，此代码运行良好。即使不使用_e.preventDefault()_，此代码也可以在其他浏览器中正常工作。 - Abhijeet kumar sharma

我刚刚发现只有在Chrome开发者工具打开时才会出现问题。如果关闭它，应该就能正常工作了。 - jbyrd

谢谢@jdyrd，真是个噩梦！ - James

@jbyrd 这是一个非常奇怪的问题。我已经试图让我的鼠标事件正常工作了几个小时，它们只在我停留在页面上时才能工作，但如果我去另一个页面然后回来，它们就不能工作了。一旦我看到了你的评论并关闭了开发工具，它就完美地工作了。谢谢！ - Souleste

Answer 2

似乎有时会出现奇怪的情况，即Chrome在mousedown之后未能正确更改光标。我还遇到了这样的情况，即光标在mouseup事件之后只在短暂的一瞬间改变 :(

但是，在https://jsfiddle.net/romleon/429rf1tb/中的纯净示例正常工作。

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>

- Leon Rom

Answer 3

在 mousedown 的末尾添加 return false; 也有帮助。

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

- krishwader