Javascript JQuery-在整个页面上显示进度鼠标光标（以及JQuery UI元素），然后正确重置

（我的用户主要使用Chrome和Firefox。）

当一个长时间运行的操作开始时，我想通过将鼠标光标设置为progress来指示正在进行的操作。我想在所有可见的元素上显示这个进度——主体以及按钮、拖拽、可调整大小和任何其他可用的UI元素。 当然，我还想在之后重置所有元素的鼠标光标。因此，我必须知道每个元素的默认样式（光标指针、可拖动移动、可调整大小-…）

我的做法：

如果我只是将进度光标设置为“body”，则按钮和拖动表的光标仍然保持原来的光标，这可能会让用户感到困惑：

$("body").css("cursor", "progress");

// do long running stuff

$("body").css("cursor", "default");

如果我为所有元素设置游标，我还有另一个问题，因为我不知道哪些元素有哪个游标。因此，按钮、可拖动、可调整大小等将在之后松开光标：

$("*").css("cursor", "progress");

// do long running stuff

$("*").css("cursor", "default");

我发现的唯一工作方法是：

$("body").css("cursor", "progress");
$("button").css("cursor", "progress");
$(".ui-dialog-titlebar").css("cursor", "progress");
$(".ui-resizable-n").css("cursor", "progress");
$(".ui-resizable-s").css("cursor", "progress");
$(".ui-resizable-w").css("cursor", "progress");
$(".ui-resizable-e").css("cursor", "progress");

// do long running stuff

$("body").css("cursor", "default");
$("button").css("cursor", "pointer");
$(".ui-dialog-titlebar").css("cursor", "move");
$(".ui-resizable-n").css("cursor", "n-resize");
$(".ui-resizable-s").css("cursor", "s-resize");
$(".ui-resizable-w").css("cursor", "w-resize");
$(".ui-resizable-e").css("cursor", "e-resize");

是否有更优雅/通用的方法来实现这一点？此外，我不确定是否忘记将特定JQuery样式重置为其默认样式。我想在我所有的页面上解决这个问题，而不再去想它

---

对于“长时间运行操作”，我指的是$.ajax/$.post调用，如下所示：

// my new magic mouse cursor method which should do what I want
showProgressCursor(true);

$.post(window.location.href, {action: 'reprovide'}, function(data) {
    // should reset all cursor CSS to their correct defaults
    showProgressCursor(false);
});

---

查看此小提琴以了解执行此操作的方法：

它涉及到将一个类添加到您的主体（或任何您想要的地方），并为其子体添加一个CSS通用选择器。你应该对大多数不可避免的关于通用选择器是多么邪恶的评论持保留态度（）

---

FWIW-我倾向于同意来自其他链接线程的一些海报，即加载GIF或其他东西比摆弄光标要好。但最终你会比我们更了解你的应用：）

你的“长时间运行的东西”是同步还是异步完成的？因为如果是同步的，那么UI线程在完成所有操作之前不会更新。请记住，浏览器JS是单线程的。UI线程会注意到进程何时完成。我正在使用$.post/$.ajax调用。我在每次调用之前设置进度游标，在回调中我将其重置为每个默认值。在将游标类型设置为“进度”之前，能否获取当前值并存储它，然后在长时间运行的进程结束后将其设置回存储的值？@ZackT。嗯，也许。。。如果有一种方法可以将具有非默认游标的所有元素的游标CSS保存到一个批处理对象中。但我不知道该怎么做。我真的很想摆脱单一风格的设置，找到一个通用的方法！例如，我也忘记了nw调整大小，ne调整大小，…-不知道我还忘了什么…或者这篇文章似乎更容易实现

body.loading, body.loading * {
    cursor:progress !important;
}