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

这对我来说很有用，无需移动鼠标：

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/

或者我错过了什么？

鼠标停止时CSS光标更改无效

1 个答案: