jQuery 无需用户移动鼠标即可将浏览器光标从“等待”变为“自动”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1718415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting the browser cursor from "wait" to "auto" without the user moving the mouse
提问by Nosredna
I use this jQuery code to set the mouse pointer to its busy state (hourglass) during an Ajax call...
我使用此 jQuery 代码在 Ajax 调用期间将鼠标指针设置为其忙碌状态（沙漏）...
$('body').css('cursor', 'wait');
and this corresponding code to set it back to normal...
和这个相应的代码将其设置回正常......
$('body').css('cursor', 'auto');
This works fine... on some browsers.
这工作正常......在某些浏览器上。
On Firefox and IE, as soon as I execute the command, the mouse cursor changes. This is the behavior I want.
在 Firefox 和 IE 上，只要我执行命令，鼠标光标就会改变。这是我想要的行为。
On Chrome and Safari, the mouse cursor does not visibly change from "busy" to "auto" until the user moves the pointer.
在 Chrome 和 Safari 上，在用户移动指针之前，鼠标光标不会明显地从“忙碌”变为“自动”。
What is the best way to get the reluctant browsers to switch the mouse pointer?
让不情愿的浏览器切换鼠标指针的最佳方法是什么？
采纳答案by user213788
It is a bug in both browsers at the moment. More details at both links (in comments as well):
目前这两个浏览器都存在错误。两个链接中的更多详细信息（也在评论中）：
http://code.google.com/p/chromium/issues/detail?id=26723
http://code.google.com/p/chromium/issues/detail?id=26723
and
和
回答by Korayem
I would rather do it more elegantly like so:
我宁愿像这样更优雅地做到这一点：
$(function(){
$("html").bind("ajaxStart", function(){
$(this).addClass('busy');
}).bind("ajaxStop", function(){
$(this).removeClass('busy');
});
});
CSS:
CSS：
html.busy, html.busy * {
cursor: wait !important;
}
Source: http://postpostmodern.com/instructional/global-ajax-cursor-change/
来源：http: //postpostmodern.com/instructional/global-ajax-cursor-change/
回答by J. Allen
I believe this issue (including the mousedown problem) is now fixed in Chrome 50.
我相信这个问题（包括 mousedown 问题）现在在 Chrome 50 中得到了修复。
But only if you are not using the developer tools!!
但前提是您没有使用开发人员工具！！
Close the tools and the cursor should immediately respond better.
关闭工具，光标应立即响应更好。
回答by Sergiu
I got inspired from Korayem solution.
我从 Korayem 解决方案中获得灵感。
Javascript:
Javascript：
jQuery.ajaxSetup({
beforeSend: function() {
$('body').addClass('busy');
},
complete: function() {
$('body').removeClass('busy');
}
});
CSS:
CSS：
.busy * {
cursor: wait !important;
}
Tested on Chrome, Firefox and IE 10. Cursor changes without moving the mouse. "!important" is needed for IE10.
在 Chrome、Firefox 和 IE 10 上测试。无需移动鼠标即可更改光标。IE10 需要“!important”。
Edit: You still have to move cursor on IE 10 after the AJAX request is complete (so the normal cursor appear). Wait cursor appears without moving the mouse..
编辑：在 AJAX 请求完成后，您仍然需要在 IE 10 上移动光标（因此会出现普通光标）。等待光标出现而不移动鼠标..
回答by Felix
Korayem's solution works for me in 100% cases in modern Chrome, Safari, in 95% cases in Firefox, but does not work in Opera and IE.
Korayem 的解决方案在现代 Chrome、Safari 中 100% 的情况下对我有效，在 Firefox 中为 95%，但在 Opera 和 IE 中不起作用。
I improved it a bit:
我改进了一点：
$('html').bind('ajaxStart', function() {
$(this).removeClass('notbusy').addClass('busy');
}).bind('ajaxStop', function() {
$(this).removeClass('busy').addClass('notbusy');
});
CSS:
CSS：
html.busy, html.busy * {
cursor: wait !important;
}
html.notbusy, html.notbusy * {
cursor: default !important;
}
Now it works in 100% cases in Chrome, Safari, Firefox and Opera. I do not know what to do with IE :(
现在它可以在 Chrome、Safari、Firefox 和 Opera 中 100% 的情况下工作。我不知道如何处理 IE :(
回答by pmrotule
First of all, you should be aware that if you have a cursor assigned to any tag within your body, $('body').css('cursor', 'wait');will not change the cursor of that tag (like me, I use cursor: pointer;on all my anchor tag). You might want to look at my solution to this particular problem first : cursor wait for ajax call
首先，你应该知道，如果你有一个光标分配给你身体内的任何标签，$('body').css('cursor', 'wait');不会改变那个标签的光标（像我一样，我cursor: pointer;在我所有的锚标签上使用）。你可能想先看看我对这个特定问题的解决方案：cursor wait for ajax call
For the problem that the cursor is only updated once the user move the mouse on webkit browsers, as other people said, there is no real solution.
对于用户在webkit浏览器上移动鼠标时光标才会更新的问题，正如其他人所说，没有真正的解决方案。
That being said, there is still a workaround if you add a css spinner to the current cursor dynamically. This is not a perfect solution because you don't know for sure the size of the cursor and if the spinner will be correctly positioned.
话虽如此，如果您动态地向当前光标添加 css 微调器，仍然有一种解决方法。这不是一个完美的解决方案，因为您不确定光标的大小以及微调器是否正确定位。
CSS spinner following the cursor: DEMO
跟随光标的 CSS 微调器：DEMO
$.fn.extend(
{
reset_on : function(event_name, callback)
{ return this.off(event_name).on(event_name, callback); }
});
var g_loader = $('.loader');
function add_cursor_progress(evt)
{
function refresh_pos(e_)
{
g_loader.css({
display : "inline",
left : e_.pageX + 8,
top : e_.pageY - 8
});
}
refresh_pos(evt);
var id = ".addcursorprog"; // to avoid duplicate events
$('html').reset_on('mousemove' + id, refresh_pos);
$(window).
reset_on('mouseenter' + id, function(){ g_loader.css('display', 'inline'); }).
reset_on('mouseleave' + id, function(){ g_loader.css('display', 'none'); });
}
function remove_cursor_progress(evt)
{
var id = ".addcursorprog";
g_loader.css('display', 'none');
$('html').off('mousemove' + id);
$(window).off('mouseenter' + id).off('mouseleave' + id);
}
$('.action').click(add_cursor_progress);
$('.stop').click(remove_cursor_progress);
You will need to check if it is a touch device as well var isTouchDevice = typeof window.ontouchstart !== 'undefined';
您还需要检查它是否是触摸设备 var isTouchDevice = typeof window.ontouchstart !== 'undefined';
In conclusion, you better try to add in your page a static spinner or something else that shows the loading process instead of trying to do it with the cursor.
总之，您最好尝试在页面中添加一个静态微调器或其他显示加载过程的内容，而不是尝试使用光标来完成。
回答by Ninjakannon
Working solution on CodeSandbox
CodeSandbox 上的工作解决方案
Some of the other solutions do not work in all circumstances. We can achieve the desired result with two css rules:
其他一些解决方案并不适用于所有情况。我们可以通过两个 css 规则来达到我们想要的结果：
body.busy, .busy * {
cursor: wait !important;
}
.not-busy {
cursor: auto;
}
The former indicates that we are busy and applies to all elements on the page, attempting to override other cursor styles. The latter applies only to the page body and is used simply to force a UI update; we want this rule to be as non-specific as possible and it doesn't need to apply to other page elements.
前者表示我们很忙，并应用于页面上的所有元素，试图覆盖其他光标样式。后者仅适用于页面主体，仅用于强制 UI 更新；我们希望此规则尽可能不具体，并且不需要应用于其他页面元素。
We can then trigger and end the busy state as follows:
然后我们可以触发和结束忙碌状态，如下所示：
function onBusyStart() {
document.body.classList.add('busy');
document.body.classList.remove('not-busy');
}
function onBusyEnd() {
document.body.classList.remove('busy');
document.body.classList.add('not-busy');
}
In summary, although we have to change the cursor style to update the cursor, directly modifying document.body.style.cursoror similar does not have the intended effect, on some engines such as Webkit, until the cursor is moved. Using classes to affect the change is more robust. However, in order to reliably force the UI to update (again, on some engines), we have to add another class. It seems removing classes is treated differently from adding them.
综上所述，虽然我们必须通过改变光标样式来更新光标，但直接修改document.body.style.cursor或类似并不会达到预期的效果，在某些引擎如Webkit上，直到光标移动为止。使用类来影响更改更加健壮。然而，为了可靠地强制 UI 更新（同样，在某些引擎上），我们必须添加另一个类。似乎删除类与添加类的处理方式不同。
回答by cestar
HERE is my solution:
这是我的解决方案：
function yourFunc(){
$('body').removeClass('wait'); // this is my wait class on body you can $('body').css('cursor','auto');
$('body').blur();
$('body').focus(function(e){
$('body')
.mouseXPos(e.pageX + 1)
.mouseYPos(e.pageX - 1);
});
}
回答by cestar
As of jquery 1.9 you should ajaxStart and ajaxStop to document. They work fine for me in firefox. Have not tested in other browsers.
从 jquery 1.9 开始，您应该使用 ajaxStart 和 ajaxStop 来记录. 它们在 Firefox 中对我来说很好用。未在其他浏览器中测试。
In CSS:
在 CSS 中：
html.busy *
{
cursor: wait !important;
}
In javaScript:
在 JavaScript 中：
// Makes the mousecursor show busy during ajax
//
$( document )
.ajaxStart( function startBusy() { $( 'html' ).addClass ( 'busy' ) } )
.ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )
回答by SLaks
I don't think you'll be able to do it.
我不认为你能做到。
However, try changing the scroll position; it might help.
但是，尝试更改滚动位置；它可能会有所帮助。
