マウスを移動することなく、ユーザー「自動」に「待ち」からブラウザのカーソルを取得

https://stackoverflow.com/questions/1718415

19-09-2019
|

質問

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

$('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;
}

マウスを動かさずにクロム、FirefoxとIE 10カーソルの変更でテスト。 "！重要な" IE10のために必要とされます。

編集：AJAX要求は（そう、通常のカーソルが表示されます）完了後にあなたはまだIE 10の上にカーソルを移動する必要があります。カーソルがマウスを移動せずに表示されるまで待ちます..

まず第一に、あなたはあなたの体の中に任意のタグに割り当てられたカーソルを持っている場合、$('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';であるかどうかを確認する必要があります。

結論として、あなたはもっと自分のページに代わり、カーソルでそれをやろうとしているのロード処理を示し静的スピナーまたは何か他のものを追加してみます。

Korayemのソリューションは、Firefoxで95％のケースでは、近代的なクロム、Safariで100％のケースで私のために動作しますが、オペラや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;
}

今ではクローム、サファリ、FirefoxとOperaの100％のケースで動作します。私はIEで何をするか分からない：（

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を強制するために、我々は別のクラスを追加する必要があります。それは、それらを追加する異なる方法で処理されたクラスを削除するようだ。

私はあなたがそれを行うことができるでしょうとは思わない。

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

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

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のバグです。あなたはそれをに報告する必要があります。

私はこれを試していないが、しかし、あなたは絶対に配置されているとちょうどCSSを変更する前に、ビューポートを埋める透明のdivを作成する場合について。 CSSは体に変更されたときに続いて、DIVを削除します。この をされ、体にmouseoverイベントをトリガーするかもしれません。の最新のCSS値に更新するカーソルを引き起こす可能性があります。

繰り返しますが、私はこれをテストしていませんが、それはショットの価値があります。

やあみんな、私はすべてのブラウザで動作核心ザラザラソリューションを持っています。仮定はprotoypeライブラリが使用されています。誰かがあまりにも平野のJavascriptとしてこれを書くことができます。解決策は、あなたがカーソルをリセットして、カーソルを移動させるためにそれを少し振った直後にすべての上にdiv要素を持つことです。これは、私のブログの http://arunmobc.blogspot.comで公開されています/2011/02/cursor-not-changing-issue.htmlする。

。

$（ '*'）のcss（ 'カーソル'、 '待ちます'）;リンクを含むページ上のどこでも動作します。

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow