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

我们假设我们有简单的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 – 完全符合预期但不移动鼠标。 这个bug(?)与Firefox无关,我没有在Internet Explorer和Opera下检查它…

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

提前致谢。

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

我使用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; 

现在,烦人的光标在启动时会短暂显示,但会在一秒钟内消失。 然后标志无光标地运行,直到下一次启动(几天或几周)。

BTW, ,auto似乎是另一个Chromium bug。 我发现如果我只是放了url(/blankCursor.gif) ,它就不会遵守声明。

与之前所说的相反,我从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); } 

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

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