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

Question

在我的代码中，我使用 jQuery/CSS 通过以下代码设置和取消设置 'wait' 鼠标光标：

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

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

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

setWaitCursor();

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

setDefaultCursor();

但是，除非您移动鼠标，否则此代码似乎不起作用（至少对于 Chrome 在 Win 10 上）。如果调用 setDefaultCursor 后鼠标没有移动，则光标显示 'wait' 光标，直到鼠标移动（反之亦然）。

Example: https://jsfiddle.net/antonyakushin/0jv6rqkf/

In this fiddle, the cursor changes for 2 seconds after the link is clicked. If you don't move the mouse when you click the link, the cursor does not change.

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

Answer 1

某些元素具有默认光标样式。因此，在更改光标样式时，我们也需要更改它。

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

Answer 2

只需将 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>

Answer 3

虽然这不是这个特定问题的答案，但可能会发生这种情况：

在 Chrome
打开 DevTools（很有可能，为了调试这个问题）

解决方法很简单.

Answer 4

我遇到了同样的问题，我在另一个 post cursor won't change until mouse moves 上注意到他们建议做模糊和聚焦来解决这个问题。它对我有用。所以，您的 setWaitCursor() 应该看起来像这样。那应该迫使它在没有鼠标移动的情况下改变。它在 Chrome 中对我有用，但还没有尝试过其他浏览器。

  function setWaitCursor(elem) {
    elem.css('cursor', 'wait');
    $('body').css('cursor', 'wait');
    window.blur();
    window.focus();
  }

Answer 5

我想我解决了！更改光标后只需调用 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 设置的鼠标光标在鼠标移动之前不会更改

Mouse cursor set using jQuery/CSS not changing until mouse moved

javascript

css

mouse

jquery