html - 鼠标按下时 CSS 光标更改不起作用

Question

我将鼠标放在我的 html 元素上，这会更改光标。现在，如果用户在鼠标按钮仍被按下时按下一个键，我会为该元素分配另一个光标。这在 Mozilla 上工作得很好，它会立即更改光标但在 chrome 中不会。在 chrome 中，我需要将光标移动至少一个像素才能使新光标可见。请注意，这仅在按下鼠标按钮时发生。如果不是，则光标会根据需要立即切换。知道如何正确解决这个问题吗？

更新:我刚刚发现这似乎是 WebKit 中的一个错误: https://bugs.webkit.org/show_bug.cgi?id=53341

但是无论如何，由于还没有解决办法，有没有办法让它继续工作？

这是错误行为的示例:JSFiddle Sample使用此代码:

html:

<div id="test1" style="background:blue;width:200px;height:200px;color:white">Case #1 -   cursor not changing for mousedown before moving it (Press mouse - nothing happens. Then hold mouse and move)</div>

<div id="test2" style="background:red;width:200px;height:200px;color:white">Case #2 - cursor not changing for mousedown before moving it when pressing a key (Press mouse, then click any key - Nothing happens. Then hold mouse and move)</div>

js:

var el1 = document.getElementById("test1");
var el2 = document.getElementById("test2");

el1.addEventListener("mousedown", function() {
    el1.style.cursor = "move";
});

document.addEventListener("keydown", function() {
    el2.style.cursor = "move";
});

Answer 1

这对我来说无需移动鼠标就可以在 chrome 中使用:

var el1 = document.getElementById("test1");
var el2 = document.getElementById("test2");

el1.addEventListener("mousedown", function() {
    el1.className += ' cursormove';  
});
document.addEventListener("keydown", function() {
    el1.style.cursor = "pointer";
});


.cursormove {cursor:move;}

http://jsfiddle.net/ntdap5hf/4/

还是我错过了什么？