Question

在我的代码中，我使用jQuery / CSS来设置和取消设置等待＆＃39;鼠标光标，代码如下：

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

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

我使用此代码更改鼠标光标以进行长时间操作：

setWaitCursor();

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

setDefaultCursor();

除非您移动鼠标，否则此代码似乎无效（至少对于Win 10上的Chrome）。如果在调用setDefaultCursor后未移动鼠标，则光标会显示“等待”。光标直到鼠标移动（反之亦然）。

示例：https://jsfiddle.net/antonyakushin/0jv6rqkf/

在这个小提琴中，光标在链接后变化2秒   点击。如果您在单击链接时没有移动鼠标，则   光标不会改变。

解决此问题的最佳方法是什么，即使未移动鼠标，光标也会改变？

Answer 1

尽管这不能解决此特定问题，但可能会发生这种情况：

在Chrome上
打开DevTools（很有可能为了调试此问题）

解决方案只是 close the Chrome DevTools 。

Answer 2

只需将body更改为*即可。它适用于所有元素。

Fiidle Demo

代码段：

＆＃13;

$(document).ready(function() {

  function setWaitCursor() {
    $('*').css('cursor', 'wait');
  }

  function setDefaultCursor() {
    $('*').css('cursor', '');
  }

  $('#testLink').on('click', function() {
    setWaitCursor();
    setTimeout(function() {
      setDefaultCursor();
    }, 2000);
    return false;
  });

});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我遇到了同样的问题，并且在另一篇cursor won't change until mouse moves上注意到，他们建议做些模糊处理并集中精力解决此问题。它为我工作。因此，您的setWaitCursor（）应该看起来像这样。那应该迫使它改变而无需移动鼠标。它在Chrome浏览器中对我有用，但没有尝试过其他浏览器。

“ea-php54” is not an EA4 SCL PHP

Answer 4

我想我解决了！更改光标后，只需调用setTimeout（）即可。例如

$('body').addClass('in-progress-cursor');
setTimeout(null, 0); //in typescript we need to provide arguments

这是众所周知的把戏（Why is setTimeout(fn, 0) sometimes useful?），但我没想到在这种情况下会行得通。

这是我最喜欢的告诉用户毫不客气的事情的方法。例如，我用它来指示正在进行的http请求。找到解决方案真是令人欣慰。为什么我又变得愚蠢... 实际上，我现在在John R的答案中看到了超时。但这还不够明显。

使用jQuery / CSS设置的鼠标光标在鼠标移动之前不会改变

4 个答案: