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

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

나는이 문제 (Mousedown 문제 포함)가 이제 Chrome 50에 고정되어 있다고 생각합니다.

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

도구를 닫으면 커서가 즉시 더 잘 응답해야합니다.

Korayem 솔루션에서 영감을 받았습니다.

자바 스크립트 :

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

CSS :

.busy * {
    cursor: wait !important;
}

Chrome, Firefox 및 IE 10에서 테스트되었습니다. 커서는 마우스를 움직이지 않고 변경합니다. IE10에는 "! 중요한"이 필요합니다.

편집 : AJAX 요청이 완료된 후에도 여전히 Cursor를 IE 10에 이동해야합니다 (정상 커서가 나타납니다). 마우스를 움직이지 않고 대기 커서가 나타납니다 ..

우선, 본문 내의 태그에 커서가 할당되어 있으면 $('body').css('cursor', 'wait'); 해당 태그의 커서는 변경되지 않습니다(저처럼 저는 cursor: pointer; 내 모든 앵커 태그에).이 특정 문제에 대한 내 솔루션을 먼저 살펴보고 싶을 수도 있습니다. 커서는 Ajax 호출을 기다립니다.

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

즉, 현재 커서에 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의 솔루션은 Firefox에서 95% 사례로 Modern Chrome, Safari의 100% 사례에서 저를 위해 작동하지만 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로 무엇을 해야할지 모르겠습니다.

코드 및 코드 및 작업 솔루션

다른 솔루션 중 일부는 모든 상황에서 작동하지 않습니다. 두 가지 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를 제거하십시오. 이것 ~할 것 같다 신체의 마우스 오버 이벤트를 트리거합니다 ~할 것 같다 커서가 최신 CSS 값으로 업데이트되게합니다.

다시, 나는 이것을 테스트하지 않았지만, 그것은 가치가 있습니다.

안녕하세요 여러분, 모든 브라우저에서 작동하는 Nitty gritty 솔루션이 있습니다. 가정은 Protoype 라이브러리가 사용됩니다. 누군가 이것을 평범한 JavaScript로도 쓸 수 있습니다. 해결책은 커서를 재설정하고 커서가 움직이게하기 위해 약간 흔들어야합니다. 이것은 내 블로그에 게시되었습니다 http://arunmobc.blogspot.com/2011/02/cursor-not-changing-issue.html.

$ ( '*'). CSS ( 'Cursor', 'Wait'); 링크를 포함하여 페이지의 모든 곳에서 작동합니다

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top