Question

我想按住鼠标并将光标更改为图像。然后，当我释放鼠标时，我希望它重新恢复默认值。

这是我到目前为止的代码。除非您右键单击然后左侧mousedown，否则它不起作用。怪异。

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

Answer 1

有两件事。

首先，您必须防止默认。默认行为是覆盖光标的拖动（文本选择）。

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

其次，当你的鼠标停机时，你需要移动光标，否则它不起作用。我不知道为什么，并没有找到解决办法。

无论如何，请检查这个小提琴：http://jsfiddle.net/HLLNN/3/

Answer 2

似乎有时存在奇怪的情况，其中Crome在 mousedown 之后没有正确地改变光标。我还有一个状态，其中光标在 mouseup 事件之后的片刻中很快就发生了变化:(

但是jsfiddle.net/romleon/429rf1tb/中的纯粹例子可以正常工作

Answer 3

将return false;添加到mousedown的末尾也会有所帮助。

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

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

3 个答案: