사용자가 마우스를 이동하지 않고 브라우저 커서를 "대기"에서 "자동"으로 이동

사용자가 마우스를 이동하지 않고 브라우저 커서를 "대기"에서 "자동"으로 이동

이 jQuery 코드를 사용하여 Ajax 호출 중 마우스 포인터를 통화 중 상태(시간 유리)로 설정합니다...

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

정상으로 되돌리기 위한 이 코드는...

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

이 정도면 잘 먹히는데...일부 브라우저에서

Firefox와 IE에서는 명령을 실행하면 바로 마우스 커서가 바뀝니다.이것이 제가 원하는 행동입니다.

Chrome 및 Safari에서 마우스 커서는 사용자가 포인터를 이동할 때까지 "바빠짐"에서 "자동"으로 눈에 띄게 변경되지 않습니다.

꺼리는 브라우저가 마우스 포인터를 바꾸도록 하는 가장 좋은 방법은 무엇입니까?

현재 두 브라우저 모두 버그입니다.두 링크에서 보다 자세한 내용(댓글에도 있음):

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

그리고.

http://code.google.com/p/chromium/issues/detail?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에서 해결된 것 같습니다.

하지만 개발자 도구를 사용하지 않는 경우에만!!

도구를 닫으면 커서의 반응이 좋아집니다.

저는 코라젬 솔루션에서 영감을 얻었습니다.

자바스크립트:

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에서 커서를 이동해야 합니다(그래서 일반 커서가 나타납니다).마우스를 움직이지 않고 대기 커서가 나타납니다.

Code Sandbox의 작업 솔루션

다른 솔루션 중 일부는 모든 상황에서 작동하지 않습니다.우리는 두 개의 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웹킷과 같은 일부 엔진에서는 커서가 이동하기 전까지는 이와 유사한 기능이 사용되지 않습니다.클래스를 사용하여 변화에 영향을 주는 것이 더 강력합니다.그러나 (일부 엔진에서 다시) UI 업데이트를 확실하게 수행하기 위해서는 클래스를 추가해야 합니다.수업을 제거하는 것과 추가하는 것은 다르게 취급되는 것 같습니다.

몸$('body').css('cursor', 'wait');다처럼)를 합니다).cursor: pointer;내 모든 앵커 태그에.)이 특정 문제에 대한 내 해결책을 먼저 살펴보실 수도 있습니다. 커서가 ajax 호출을 기다립니다.

다른 사람들이 말했듯이 웹킷 브라우저에서 사용자가 마우스를 움직이면 커서가 업데이트되는 문제에 대해서는 실질적인 해결책이 없습니다.

그렇기는 하지만 현재 커서에 cs 스피너를 동적으로 추가하면 해결할 수 있는 방법이 남아있습니다.커서의 크기와 스피너의 위치가 정확한지 여부를 확실히 알 수 없기 때문에 완벽한 해결책은 아닙니다.

커서를 따르는 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의 솔루션은 현대 크롬에서는 100%, 사파리에서는 95%, 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를 어떻게 해야할지 모르겠습니다 :(

당신은 그것을 할 수 없을 것 같습니다.

그러나 스크롤 위치를 변경해 보십시오. 도움이 될 수도 있습니다.

해결 방법은 다음과 같습니다.

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 시점에서 문서화하려면 axStart와 axStop을 사용해야 합니다.파이어폭스에서는 잘 작동합니다.다른 브라우저에서 테스트하지 않았습니다.

CSS에서:

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

자바스크립트의 경우:

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

나는 이것을 시도하지 않았지만 CSS를 변경하기 직전에 절대적으로 위치하고 뷰포트를 채우는 투명 디브를 생성하면 어떨까요?그리고 cs가 body에 변경되면 div를 제거합니다.이로 인해 본문에서 마우스 오버 이벤트가 발생하여 커서가 최신 CSS 값으로 업데이트될 수 있습니다.

다시 한번 말하지만, 이것을 시험해 본 적은 없지만, 시도해 볼만한 가치가 있습니다.

안녕하세요 여러분, 저는 모든 브라우저에서 작동하는 아주 거친 솔루션을 가지고 있습니다.프로토타입 라이브러리가 사용된다고 가정합니다.누군가는 이것을 평범한 자바스크립트로 쓸 수도 있습니다.해결책은 커서를 리셋하고 커서가 움직이도록 하기 위해 조금 흔들면 바로 위에 디본이 있는 것입니다.이것은 제 블로그 http://arunmobc.blogspot.com/2011/02/cursor-not-changing-issue.html 에 게재되어 있습니다.

$('*'. css('cursor', '기다림'); 링크를 포함한 페이지의 모든 곳에서 작동합니다.

언급URL : https://stackoverflow.com/questions/1718415/getting-the-browser-cursor-from-wait-to-auto-without-the-user-moving-the-mou