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

【问题标题】：Mouse cursor not changing if a pointer is not moved in Webkit-based browsers如果在基于 Webkit 的浏览器中未移动指针，则鼠标光标不会改变
【发布时间】：2010-11-30 11:59:44
【问题描述】：

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

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

问题在于，如果鼠标指针移到#test 块上，然后按下 Shift 键，WebKit 不会更改 #test 块鼠标光标。但是，只要您移动光标，Chrome 和 Safari 就会将光标样式更改为 pointer - 完全符合预期，但没有鼠标移动。这个bug（？）与火狐无关，在Internet Explorer和Opera下也没查到……

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

提前致谢。

【问题讨论】：

已在 Chrome 7.0.517.44 中验证。以前肯定注意到过，这很烦人。

标签： jquery css webkit mouse-cursor onmousemove

【解决方案1】：

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

【讨论】：

有一个关于这个错误条目的链接？找不到，我想给它加星标。
搜索“webkit cursor change bug”之类的，你会发现很多。其中之一在这里：code.google.com/p/chromium/issues/detail?id=26723

【解决方案2】：

我在使用 Chromium 11.0.696.65 时遇到了这个问题。我能够用一点延迟的 JavaScript 来解决它。

我试图制作一个由大型 LCD 显示器组成的电子标牌，该显示器由一台在 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 错误。我发现如果我只输入url(/blankCursor.gif)，它不会兑现声明。

【讨论】：

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

【解决方案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);
}

【讨论】：

【解决方案4】：

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

如果您强制浏览器重排，光标似乎会改变。因此，如果您将光标设置在 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;
    });
});

【讨论】：