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

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

本文关键字：鼠标 移动 光标 jQuery CSS 设置 使用      更新时间：2024-06-11

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

  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/

在这个小提琴中，在链接被单击。如果单击链接时不移动鼠标光标不会改变。

解决这个问题的最佳方法是什么，这样即使没有移动鼠标，光标也会发生变化？

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

  • 在Chrome上
  • 打开DevTools（很可能是为了调试这个问题）

解决方案只是关闭Chrome DevTools。

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

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

演示小提琴

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

Fiidle演示

代码片段：

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

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

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

这是众所周知的技巧（为什么setTimeout（fn，0）有时有用？）但我没想到这在这种情况下会起作用。

这是我最喜欢的一种方法，可以不引人注意地告诉用户发生了什么事情。例如，我用它来指示http请求正在进行中。找到了解决办法，真是松了一口气。为什么我又觉得自己很愚蠢。。。事实上，我现在在约翰·R的回答中看到了暂停。但这还不够明显。

我也遇到了同样的问题，我注意到在另一个帖子上，光标不会改变，直到鼠标移动，他们建议进行模糊和聚焦来解决这个问题。它对我有效。所以，你的setWaitCursor（）应该是这样的。这应该会迫使它在不移动鼠标的情况下进行更改。它在Chrome中对我有效，但没有尝试过其他浏览器。

  function setWaitCursor(elem) {
    elem.css('cursor', 'wait');
    $('body').css('cursor', 'wait');
    window.blur();
    window.focus();
  }
相关文章：