Question

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

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

问题是如果鼠标指针移过#test块，WebKit不会更改#test块鼠标光标，然后按下Shift键。但是一旦移动光标，Chrome和Safari就会将光标样式更改为pointer - 完全按照预期但不移动鼠标。这个错误（？）与Firefox无关，我没有在Internet Explorer和Opera ...

下查看它

那么，有没有人遇到同样的麻烦？也许，有没有解决方法呢？

提前致谢。

Answer 1

这是当时webkit引擎中众所周知的错误，并没有真正的解决方法。

Answer 2

我使用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)，它就不会遵守声明。

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

Answer 4

我找到了问题的解决方法。

如果您强制浏览器重排，似乎光标已更改。因此，如果您将光标设置在[INFO]: You can also use ncu as an alias上，然后调用elem（或任何数量的触发重排的属性），光标将就地更新。

因此，在您的情况下，代码最终会成为：

elem.scrollTop

如果在基于Webkit的浏览器中未移动指针，则鼠标光标不会更改

4 个答案: