鼠標一套不改變，直到鼠標移動

在我的代碼我使用了jQuery/CSS來設置和取消的「等待」鼠標光標用下面的代碼：鼠標一套不改變，直到鼠標移動

function setWaitCursor() { 
    $('body').css('cursor', 'wait'); 
    } 

    function setDefaultCursor() { 
    $('body').css('cursor', ''); 
    }

我使用此代碼更改鼠標光標長時間操作：

setWaitCursor(); 

... do stuff that takes a few seconds ... 

setDefaultCursor();

此代碼似乎沒有工作，除非你移動鼠標，但是（至少爲Chrome在Win 10）。如果調用setDefaultCursor後鼠標未移動，則光標顯示「等待」光標，直到移動鼠標（反之亦然）。

實施例：https://jsfiddle.net/antonyakushin/0jv6rqkf/

在該小提琴，鏈接後2秒鐘光標變爲是點擊。如果在單擊鏈接時不移動鼠標，則光標不會更改。

解決此問題的最佳方法是什麼？即使鼠標未移動，光標也會改變？

來源

2016-04-13 Anton

見我在https://stackoverflow.com/a/47055518/83169答案。 –

某些元素具有默認光標樣式。所以，如果改變光標樣式，我們也需要改變它。

$(document).ready(function() { 
    function setWaitCursor(elem) { 
    elem.css('cursor', 'wait'); 
    $('body').css('cursor', 'wait'); 
    } 
    function setDefaultCursor(elem) { 
    elem.css('cursor', ''); 
    $('body').css('cursor', ''); 
    } 
    $('#testLink').on('click', function() { 
    var x = $(this) 
    setWaitCursor(x); 
    setTimeout(function() { 
     setDefaultCursor(x); 
    }, 5000); 
    return false; 
    }); 
});

Demo fiddle

來源

2016-04-13 11:55:36

我發現在頁面加載時運行這種類型的代碼似乎工作，但不是當通過點擊鏈接或按鈕等事件觸發時。例如，如果鼠標點擊「測試鏈接」時沒有移動，我在這裏有問題：https://jsfiddle.net/antonyakushin/0jv6rqkf/ – Anton

我已更新我的答案。請驗證它，讓我知道你是否需要改變。 –

優秀的解釋，我沒有意識到一些元素有一個默認的光標樣式。謝謝！ – Anton

只要改變body到*。它將適用於所有元素。

Fiidle Demo

代碼片段：

$(document).ready(function() { 
 

 
    function setWaitCursor() { 
 
    $('*').css('cursor', 'wait'); 
 
    } 
 

 
    function setDefaultCursor() { 
 
    $('*').css('cursor', ''); 
 
    } 
 

 
    $('#testLink').on('click', function() { 
 
    setWaitCursor(); 
 
    setTimeout(function() { 
 
     setDefaultCursor(); 
 
    }, 2000); 
 
    return false; 
 
    }); 
 

 
});

body { 
 
    min-width: 500px; 
 
    min-height: 500px; 
 
    background-color: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="mouseContainer"> 
 
    <a href="#" id="testLink">Test Link</a> 
 
</div>

來源

2016-04-13 12:29:28

使用'*'會刪除已設置的元素上的遊標屬性。 – Bobort

鼠標一套不改變，直到鼠標移動

回答

相關問題