JavaScript光标更改（并再次更改回来）

Question

我有一个页面，需要进行一些耗时几秒钟的数据库操作。在此期间，我想设置一个“等待”光标，以防止用户狂点按钮。我看了一下 document.body.style.cursor = "wait" ，但这种方法只能在鼠标悬停在页面主体上时起作用（即如果鼠标悬停在按钮上，则仍会显示正常指针）。那么，如何才能让鼠标无论在页面上的哪个位置，都显示等待图标呢？

这个问题的第二部分是，一旦处理完成，该怎么把光标改回来呢？如果将它设置为"default"，这似乎会覆盖我在CSS中设置的任何"hover"光标更改（因此当鼠标悬停在特定对象上时，它不再变成手型等）。 编辑：第一个答案效果很好，但在IE中，光标的改变直到你实际移动光标才刷新。有解决方法吗？

- Jordan

Answer 1

我建议两件事情： a）最好编写一个类似于以下的CSS：

body.waiting * { cursor: wait; }

b) 使用JS来处理body类

/* when you need to wait */
document.body.className = 'waiting';
/* to remove the wait state */
document.body.className = ''; // could be empty or whatever you want

你可能想要添加类而不是替换整个类属性，我的建议是使用类似jQuery的东西来实现。

编辑2019：不仅仅为了这个目的使用jQuery，请使用classList。

- Tom Roggero

---

点赞这个帖子是因为你可以将其他更具体的选择器绑定到同一个类上，以处理像链接和表单字段这样具有自己固有光标规范的元素，如上所述。 - enigment

然而，我尝试过的所有技术，包括这个，都没有在渲染内容底部以下产生影响。有趣的是，在HTML元素上应用类（而不是body），仍然会在那里保留默认光标，尽管它能够改变该区域的背景颜色。 - enigment

当我将光标恢复正常时，我发现这个解决方案对我最有效。我使用了jQuery的addClass/removeClass函数来管理body元素上的等待类。当删除类时，我的光标会像正常情况下一样遵循页面元素的CSS规则。 - ricke

Answer 2

样式应该通过CSS处理，正如W3C.com所述：

CSS是描述网页展示的语言，包括颜色、布局和字体。...将HTML与CSS分离使得网站更易于维护，可以在不同页面之间共享样式表，并根据不同的环境来定制页面。这被称为结构（或内容）与展示的分离。

如Tom Rogerro所建议的，向你的CSS文件添加一行：

body.waiting * { cursor: wait; }

然而，您的脚本不应覆盖整个类名列表。Tom 建议通过 jQuery 设置类名，但在这种情况下，jQuery 是不必要的。简单的 JavaScript 就可以做到。

要将类名“waiting”添加到文档主体中：

document.body.classList.add('waiting');

从文档主体中删除类名为“waiting”的方法是：

document.body.classList.remove('waiting');

- happyt

Answer 3

对于你的第一个问题，尝试使用 cursor: wait !important;。

对于你的第二个问题，元素的默认光标是 cursor: auto;，而不是 cursor: default; 或 cursor: inherit;。

- Hello71

---

我发现这个第一种解决方案在 Firefox 16 或 Chrome 23 中都不起作用（只测试了这两个浏览器）。实际上，在两个浏览器中添加“!important”会导致它根本不起作用。没有这个，就像原帖子中说的那样。当光标位于 body 元素上方时，它可以工作，但当光标位于 body 元素下面、链接或表单元素上方时，最有可能是任何具有显式或内置光标设置的元素时，它就无法工作了。我没有完全编写代码，但是添加 @Tom Roggero 建议的类可能会起作用，因为您可以添加更具体的选择器来处理其他需要它的元素。 - enigment

Answer 4

如果您喜欢使用JQuery，那么解决这个问题的快速方法是使用以下代码：

$('*').css('cursor','wait')

我不知道这个方法是否优雅，但它一直对我有效，

- ShudderPig

Answer 5

虽然不是回答问题的方式，但这是实现所需效果的方法。

在加载时使一个 div 标签（见下面的类名）可见。

• 确保没有元素可以访问，昏暗的显示表明这一点。

• 你可以添加动画 gif 来表示正在进行某些操作，而不是使用光标。

  .loading{ position:fixed; height:100%; width:100%; left:0; top:0; cursor:wait; background:#000; opacity:.5; z-index:999}

- Mahks

Answer 6

任何默认不继承光标的元素（如按钮）都需要将光标设置为继承：

someButton.style.cursor = 'inherit';

要返回元素的默认值（并避免像 :hover 这样的强制鼠标指针样式导致问题），请将其设置为空字符串：

document.body.style.cursor = '';

- Delan Azabani

Answer 7

我尝试了各种方法，最终这个jQuery代码有效，特别是在需要等待光标出现在所有元素（包括按钮和链接）时。

在Angular .ts文件的顶部定义：

declare var $: any;

然后在需要等待光标出现的位置添加如下代码：

$('*').css('cursor','wait');

取消等待光标：

$('*').css('cursor','auto');

- Ashish Gupta

Answer 8

为了完全替换CSS切换行为，我们可以直接内联使用this：

<img 
  src=https://cdn.sstatic.net/Img/unified/sprites.svg
  onmouseover="this.style.cursor = 'crosshair'"
>

- NVRM