更改整个页面的鼠标光标？

Question

我有一个拖拽UI程序，在可拖动元素上单击时，鼠标光标会变成手型。

问题是，我允许在屏幕上的任何地方进行拖拽，并且光标会在锚点标记等处发生变化...

我尝试过$('*').addClass('grabbing')，但这非常耗费资源。

有没有一个简单高效的方法可以处理这个问题？

- Wesley

---

参见：https://dev59.com/snVC5IYBdhLWcg3ww0Dr - Alexander Bird

Answer 1

在 CSS 层面上实现：

* {
   cursor: pointer;
}

使用jQuery实现这个功能会强制迭代DOM中的每个节点并重写它们的CSS类。在一个长文档中，这将是一种巨大的时间浪费。

- Marc B

---

但这将始终处于活动状态。光标只需要在鼠标按下时更改。它需要以某种方式在Javascript中发生。 - Wesley

你可以通过JavaScript动态地添加/删除CSS规则。只需在onmousedown/onmouseup中执行即可，这比从页面上的每个DOM节点添加/删除类更快。 - Marc B

@Mark B 酷。你能提供一个带有示例的新答案吗？我会尝试一下，如果它正常工作，我会标记它。 - Wesley

@mike：总有！important。 - Marc B

当BODY短于100％时，仍未为整个页面设置光标。 - Charon ME

Answer 2

尝试这个

$('body').addClass('grabbing');

或者

$(document).addClass('grabbing');

//编辑后的答案

$('body').mousedown(function(e){
    $(this).css({'cursor':'pointer'});
}).mouseup(function(e){
    $(this).css({'cursor':'auto'});
});

如果您的firebug已经打开，您可以看到body style标签中的更改。但不知何故它没有起作用。您可以将其作为参考，并尝试类似的方法来获得解决方案。

- Vikas Naranje

---

z-index元素不会被覆盖吗？ - Mike Christensen

@MikeChristensen 正确。这还不太行。 - Wesley

Answer 3

我尝试了大部分方法，但并不是所有元素都会显示光标。一种快速而简单的方法是遍历整个DOM，并为每个元素设置光标。

document.querySelectorAll('*').forEach(function(node) {
    node.style.cursor = 'progress';
});

在这里执行ajax或其他操作...之后跟随：

document.querySelectorAll('*').forEach(function(node) {
    node.style.cursor = 'default';
});

- Robert Daniels

Answer 4

尽管这不是对这个问题的直接回答，但我想引起注意的是，我们可以以不同的方式解决这个问题。

通过在除了投放区域之外的所有内容上放置一个空的全屏div，在mousedown事件后激活它。因此，我们可以通过该div的:hover类简单地更改整个屏幕的光标。

- Makan

Answer 5

当你需要时，可以调用一行JavaScript代码：

document.body.style.setProperty('cursor', 'pointer');

当您想再次撤销操作时，可以执行另一条单行命令：

document.body.removeAttribute('style'); 

- Rounin

Answer 6

您可以向页面/站点添加新样式表。

https://codepen.io/Swell_boy/pen/oNMBbKq

const css = "* { cursor: grabbing !important; }",
  styletag = document.createElement("style");

styletag.type = "text/css";
if (styletag.styleSheet) {
  styletag.styleSheet.cssText = css;
} else {
  styletag.appendChild(document.createTextNode(css));
}

document.addEventListener("mouseup", function myFunction_Default() {
  styletag.remove();
});

document.addEventListener("mousedown", function myFunction_Grab() {
  document.body.appendChild(styletag);
});

- Swell_boy