从“等待”获取浏览器光标至“自动”无需用户移动鼠标

Question

我使用此 jQuery 代码在 Ajax 调用期间将鼠标指针设置为其繁忙状态（沙漏）...

$('body').css('cursor', 'wait');

并使用此相应的代码将其设置回正常状态...

$('body').css('cursor', 'auto');

这在某些浏览器上工作正常...。

在 Firefox 和 IE 上，只要我执行命令，鼠标光标就会发生变化。这就是我想要的行为。

在 Chrome 和 Safari 上，在用户移动指针之前，鼠标光标不会明显从“忙”更改为“自动”。

让不情愿的浏览器切换鼠标指针的最佳方法是什么？

Answer 1

目前这在两个浏览器中都是一个错误。更多详细信息请参见两个链接（也在评论中）：

http://code .google.com/p/chromium/issues/detail?id=26723

和

http://code.google.com/p/chromium/issues/detail?id=20717

Answer 2

我宁愿做得更优雅，如下所示：

$(function(){  
  $("html").bind("ajaxStart", function(){  
     $(this).addClass('busy');  
   }).bind("ajaxStop", function(){  
     $(this).removeClass('busy');  
   });  
});

CSS：

html.busy, html.busy * {  
  cursor: wait !important;  
}  

来源：http://postpostmodern。 com/instructional/global-ajax-cursor-change/

Answer 3

我相信这个问题（包括 mousedown 问题）现已在 Chrome 50 中得到解决。

但前提是您不使用开发人员工具！

关闭工具，光标应该立即响应得更好。

Answer 4

我从 Korayem 解决方案中得到了启发。

Javascript：

jQuery.ajaxSetup({
    beforeSend: function() {
       $('body').addClass('busy');
    },
    complete: function() {
       $('body').removeClass('busy');
    }
});

CSS：

.busy * {
    cursor: wait !important;
}

在 Chrome、Firefox 和 IE 10 上测试。无需移动鼠标即可更改光标。 IE10 需要“!important”。

编辑：AJAX 请求完成后，您仍然需要在 IE 10 上移动光标（以便出现正常光标）。等待光标出现而不移动鼠标..

Answer 5

CodeSandbox 上的工作解决方案

其他一些解决方案并非在所有情况下都有效。我们可以通过两个 css 规则来实现所需的结果：

body.busy, .busy * {
  cursor: wait !important;
}

.not-busy {
  cursor: auto;
}

第一个表示我们很忙，并应用于页面上的所有元素，尝试覆盖其他光标样式。后者仅适用于页面主体，并且仅用于强制 UI 更新；我们希望此规则尽可能不具体，并且不需要应用于其他页面元素。

然后我们可以触发并结束忙碌状态，如下所示：

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

综上所述，虽然我们必须改变光标样式来更新光标，但直接修改 document.body.style.cursor 或类似的方法并不具有在某些引擎（例如 Webkit）上，直到光标移动为止，会产生预期的效果。使用类来影响更改更加稳健。然而，为了可靠地强制 UI 更新（同样，在某些引擎上），我们必须添加另一个类。似乎删除类与添加类的处理方式有所不同。

Answer 6

首先，您应该意识到，如果您将光标分配给正文中的任何标签，则 $('body').css('cursor', 'wait'); 不会改变该标签的光标（像我一样，我在所有锚标签上使用 cursor:pointer;）。您可能想先看看我对这个特定问题的解决方案：光标等待ajax调用

对于光标的问题只有当用户在 webkit 浏览器上移动鼠标时才会更新，正如其他人所说，没有真正的解决方案。

话虽如此，如果您动态地将 css spinner 添加到当前光标，仍然有一个解决方法。这不是一个完美的解决方案，因为您不确定光标的大小以及微调器是否正确定位。

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

您需要检查它是否也是触摸设备 var isTouchDevice = typeof window.ontouchstart !== 'undefined';

总之，您最好尝试在页面中添加静态微调器或其他显示加载过程的内容尝试用光标来做这件事。

Answer 7

Korayem 的解决方案在现代 Chrome、Safari 中 100% 的情况下对我有效，在 Firefox 中 95% 的情况下对我有效，但在 Opera 和 IE 中不起作用。

我对其进行了一些改进：

$('html').bind('ajaxStart', function() {
    $(this).removeClass('notbusy').addClass('busy');
}).bind('ajaxStop', function() {
    $(this).removeClass('busy').addClass('notbusy');
});

CSS：

html.busy, html.busy * {
    cursor: wait !important;
}

html.notbusy, html.notbusy * {
    cursor: default !important;
}

现在它可以在 Chrome、Safari、Firefox 和 Opera 中 100% 的情况下工作。
我不知道用 IE 做什么:(

Answer 8

我认为你做不到。

但是，尝试改变滚动位置；这可能有帮助。

Answer 9

这是我的解决方案：

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

}

Answer 10

从 jquery 1.9 开始，您应该 ajaxStart 和 ajaxStop 到文档。它们在 Firefox 中对我来说工作得很好。没有在其他浏览器中测试过。

在 CSS 中：

html.busy *
{
   cursor: wait !important;
}

在 JavaScript 中：

// Makes the mousecursor show busy during ajax 
// 
$( document )

   .ajaxStart( function startBusy() { $( 'html' ).addClass   ( 'busy' ) } )     
   .ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )

Answer 11

尝试为光标属性使用正确的 css 值：

$('body').css('cursor','wait');

http://www.w3schools.com/CSS /pr_class_cursor.asp

Answer 12

我还没有尝试过这个，但是如果您在更改 CSS 之前创建一个绝对定位并填充视口的透明 div 会怎么样？然后，当 body 上的 css 更改时，删除 div。这可能触发主体上的鼠标悬停事件，这可能导致光标更新为最新的CSS值。

再说一次，我还没有测试过这个，但值得一试。

Answer 13

嘿伙计们，我有一个适用于所有浏览器的具体解决方案。假设使用原型库。有人也可以将其编写为纯 JavaScript。解决方案是在重置光标后在所有内容之上放置一个 div 并稍微摇动它以使光标移动。这是在我的博客 http://arunmobc.blogspot.com 中发布的/2011/02/cursor-not-changing-issue.html。

Answer 14

$('*').css('光标','等待');可以在页面的任何地方使用，包括链接