获取浏览器光标从“等待”为“自动”，而用户移动鼠标

StackOverflow https://stackoverflow.com/questions/1718415

题

我使用这个jQuery代码调用Ajax中设置鼠标指针到它的忙状态（沙漏）... 

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

和这个相应的代码来设置回正常... 

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

这工作得很好......在某些浏览器。

在Firefox和IE，只要我执行命令，鼠标光标改变。这就是我想要的行为。

在Chrome和Safari，鼠标光标没有明显改变从“忙”为“自动”，直到用户将指针移动。

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

有帮助吗？

解决方案

有在此刻两个浏览器中的错误。在两个链路的更多细节（在评论以及）：

http://code.google.com/p/chromium/问题/细节？ID = 26723

和

http://code.google.com/p/chromium/问题/细节？ID = 20717

其他提示

我宁愿做它更优雅像这样：

$(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 /

相信这个问题（包括鼠标按下问题）现在被固定在铬50

但是，只有当你不使用的开发工具!!

关闭工具以及光标应该立即响应更好。

我从Korayem溶液的启发。

使用Javascript：

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

CSS：

.busy * {
    cursor: wait !important;
}

在Chrome，Firefox和IE 10.光标改变测试不移动鼠标。 “！重要的” 需要用于IE10。

编辑：你还有AJAX请求之后，移动光标上IE 10是完整的（所以正常光标出现）。等待光标出现不移动鼠标..

首先，你应该知道，如果你有你的身体内分配给任何标签的光标，$('body').css('cursor', 'wait');不会改变标签的光标（像我一样，我用我所有的锚标记cursor: pointer;）。你可能想在我的解决方案来看看这方面的问题第一：光标等待Ajax调用

有关，光标仅更新一次所述用户移动上WebKit浏览器的鼠标，作为其他的人所说的问题，并没有真正的解决方案。

如此说来，还有一种解决方法如果添加的CSS微调到当前光标动态。这不是一个完美的解决方案，因为你不知道肯定光标的大小做，如果微调将在正确的位置。

CSS喷丝光标下列：的 演示 

$.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';

在最后，你最好尝试在你的页面的静态微调或别的东西，显示加载过程，而不是试图用光标做补充。

Korayem的解决方案对我的作品在100％的情况下，在现代浏览器，Safari浏览器，在95％的情况下，在Firefox，但在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;
}

现在，它工作在100％的情况下在Chrome，Safari浏览器，Firefox和Opera。 我不知道该怎么做IE（

工作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更新（再次，在一些发动机），我们不得不加入另一个类。似乎删除类是从添加它们区别对待。

我不认为你就可以做到这一点。

然而，尝试改变滚动位置;它可能会有所帮助。

下面是我的解决方案：

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

}

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

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

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

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

这也可能是WebKit中的一个错误;你应该举报。

我没有试过，但怎么样，如果你创建一个绝对定位，填补了视口的一个透明的div只是改变了CSS之前。然后，当CSS是对身体的变化，除去股利。这的可能的触发身体，这鼠标悬停事件可能的导致光标更新到最新的CSS值。

同样，我没有测试过这一点，但它是值得一试。

嗨，我有所有的浏览器工作的细节问题的解决方案。假设protoype库使用。有人可以这样写为普通的JavaScript了。解决的办法是对你重新设置光标和动摇它一点点只是毕竟之上的股利导致光标移动。这是发表在我的博客 http://arunmobc.blogspot.com /2011/02/cursor-not-changing-issue.html 。

。

$（ '*'）的CSS（ '光标'， '等待'）;将工作无处不在页面上包括链接

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top