web-dev-qa-db-ja.com

ユーザーがマウスを動かさずにブラウザのカーソルを「待機」から「自動」に変更する

このjQueryコードを使用して、Ajax呼び出し中にマウスポインターをビジー状態（砂時計）に設定します...

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

そして、これを通常に戻すための対応するコード...

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

これは正常に動作します...一部のブラウザでは。

FirefoxとIEでは、コマンドを実行するとすぐにマウスカーソルが変わります。これは私が望む動作です。

ChromeおよびSafariでは、マウスカーソルは、ユーザーがポインターを移動するまで「ビジー」から「自動」に視覚的に変化しません。

消極的なブラウザーにマウスポインターを切り替える最良の方法は何ですか？

jquerycursorbusy-cursormouse-pointerhourglass
67
Nosredna

現時点では、両方のブラウザーのバグです。両方のリンクの詳細（コメント内）：

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

そして

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

36
user213788

私はむしろもっとエレガントにそうしたいと思います：

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

38
Korayem

この問題（マウスダウンの問題を含む）は、Chrome 50。

ただし、開発者ツールを使用していない場合のみ!!

ツールを閉じると、カーソルの反応がすぐに良くなります。

21
J. Allen

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」が必要です。

編集：IE 10 AJAX要求が完了した後、通常のカーソルが表示されます。マウスを動かさずにカーソルが表示されるのを待ちます。 ..

7
Sergiu

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 :(

1
Felix

まず第一に、あなたがあなたの体の中の任意のタグにカーソルが割り当てられている場合、$('body').css('cursor', 'wait');はそのタグのカーソルを変更しないことに注意する必要があります（私のように、私はcursor: pointer;すべてのアンカータグで）。この特定の問題に対する私の解決策を最初に見たいと思うかもしれません： カーソルがajax呼び出しを待つ

他の人が言ったように、ユーザーがWebkitブラウザーでマウスを動かすとカーソルが更新されるという問題については、実際の解決策はありません。

そうは言っても、cssスピナーを現在のカーソルに動的に追加する場合は、まだ回避策があります。カーソルのサイズとスピナーが正しく配置されるかどうかがわからないため、これは完璧なソリューションではありません。

カーソルに続く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';

結論として、カーソルを使用するのではなく、静的なスピナーまたは読み込みプロセスを示す何かをページに追加することをお勧めします。

1
pmrotule

CodeSandboxでの実用的なソリューション

他のソリューションの中には、すべての状況で機能しないものもあります。 2つの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を（一部のエンジンで）確実に更新するには、別のクラスを追加する必要があります。クラスの削除は、追加とは異なる方法で処理されるようです。

1
Ninjakannon

私はあなたがそれをできるとは思わない。

ただし、スクロール位置を変更してみてください。役立つかもしれません。

0
SLaks

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' ) } )
0
user1115652

ここに私の解決策があります：

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

}
0
cestar