在基于Webkit的浏览器中，如果指针没有移动，则鼠标光标不会改变。

Question

假设我们有如下简单的jQuery代码：

var $document = $(document);
$document.ready(function() {
    var $test = $("#test");
    $document.keydown(function(e) {
        e.shiftKey && $test.css("cursor", "pointer");
    });
});

问题是WebKit在鼠标指针悬停在#test块上并按下Shift键时不会更改鼠标光标，但只要移动鼠标指针，Chrome和Safari就会将光标样式更改为指针——正如预期的那样，但不需要鼠标移动。这个问题在Firefox中不相关，我没有在Internet Explorer和Opera中进行检查... 您是否有同样问题的经验？也许有解决方法吗？谢谢！

- Lyubomyr Shaydariv

---

已在Chrome 7.0.517.44中验证。之前肯定注意到过，很烦人。 - Orbling

Answer 1

这是Webkit引擎中一个众所周知的问题，目前没有真正可行的解决方案。

- Martin Jespersen

---

这个问题有对应的 bug 报告链接吗？我找不到，想要关注一下。 - Jonatan Littke

搜索“webkit光标更改错误”等相关内容，你会找到很多。其中一个在这里：http://code.google.com/p/chromium/issues/detail?id=26723 - Martin Jespersen

在Firefox 112中似乎也会发生这种情况，我的视频播放器无法在全屏时隐藏光标（非全屏时可以），并且在视频的图像部分，如果光标位于黑色背景上（仍然是视频元素，只是没有图像），将样式设置为“none”时，它会立即正确地隐藏。 - Lampe2020

Answer 2

我已经找到了一个解决问题的方法。

看起来，如果你强制浏览器重新布局，光标会改变。因此，如果你把光标设置在elem上，然后调用elem.scrollTop（或任何其他触发重新布局的属性），光标就会更新在原地。

所以，在你的情况下，代码最终会是这样的：

var $document = $(document);
$document.ready(function() {
    var $test = $("#test");
    $document.keydown(function(e) {
        e.shiftKey && $test.css("cursor", "pointer");
        $test[0].scrollTop;
    });
});

- Pablo Montilla

Answer 3

与之前所说的相反，我从David Becker那里找到的这个解决方法似乎是有效的。（浏览器的修复正在进行中。请参见https://bugs.webkit.org/show_bug.cgi?id=101857）

function _repaintCursor() {
    var saveCursor = document.body.style.cursor,
        newCursor = saveCursor ? "" : "wait";
    _setCursor(newCursor);
    _setCursor(saveCursor);
}

function _setCursor(cursor) {
    var wkch = document.createElement("div");
    var wkch2 = document.createElement("div");
    wkch.style.overflow = "hidden";
    wkch.style.position = "absolute";
    wkch.style.left = "0px";
    wkch.style.top = "0px";
    wkch.style.width = "100%";
    wkch.style.height = "100%";
    wkch2.style.width = "200%";
    wkch2.style.height = "200%";
    wkch.appendChild(wkch2);
    document.body.appendChild(wkch);
    document.body.style.cursor = cursor;
    wkch.scrollLeft = 1;
    wkch.scrollLeft = 0;
    document.body.removeChild(wkch);
}

- danorton

Answer 4

我在使用Chromium 11.0.696.65时遇到了这个问题。我通过稍微延迟JavaScript来解决了它。

我试图制作一个由小型无盘工业计算机驱动的大型液晶显示器组成的电子标牌，该计算机在Ubuntu上运行Chromium。启动时，它会运行类似于以下内容的东西：

chromium-browser --kiosk 'http://server:4662/1920x1080/status.html?id=42'

下载的页面有一个XHR轮询循环，每当与id=42相关的任何内容发生更改时，它就会接收一个JavaScript对象文字，并相应地更新显示。有CSS指定所有元素都应该有一个空白鼠标指针。

问题是，Chrome的请求正在进行中的鼠标指针仍然停留在屏幕上。只要我移动鼠标，它就会消失。然而，真正的标志不会有一个连接的鼠标，更不用说用户去移动它了。

我添加了以下脚本：

function $(id) {return document.getElementById(id);}

function onLoad()
{
    window.setTimeout(hideCursor, 1000);

    function hideCursor() {
        $('content').style.cursor = 'url(/blankCursor.gif),auto';
    }
}

window.onload = onLoad;

现在，令人讨厌的光标会在启动时短暂出现，但一秒钟后就会消失。然后该符号将在下一次启动（几天或几周后）无光标运行。

另外，,auto 似乎是另一个 Chromium 的 bug。我发现如果只是使用 url(/blankCursor.gif)，它不会遵守声明。

- George

---

嗨，George。谢谢你的回复。Google Chrome Canary Build 13.x.x.x似乎已经消除了这个问题。 - Lyubomyr Shaydariv