使用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();

除非您移动鼠标,否则此代码似乎不起作用(至少对于Win 10上的Chrome).如果在setDefaultCursor调用鼠标后没有移动鼠标,则光标会显示"等待"光标,直到鼠标移动(反之亦然).

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

在这个小提琴中,单击链接后光标会更改2秒.如果单击链接时未移动鼠标,则光标不会更改.

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

Answer 1

尽管这不能解决此特定问题，但是可能会发生以下现象：

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

解决方案只是关闭Chrome DevTools。

Answer 2

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

$(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;
  });
});

演示小提琴