整个页面更改鼠标光标？

Question

我有一个拖动UI程序，其中可拖动元素上的鼠标光标在点击时变为抓手。

问题是，我允许拖动发生在屏幕上的任何地方，并且光标会改变锚标签等...

我已经尝试了$('*').addClass('grabbing')，但这真的很贵。

有一种简单易用的代码处理方法吗？

Answer 1

在CSS级别执行：

* {
   cursor: pointer;
}

在jquery中执行它会强制它迭代dom中的每个节点并重写其css类。在一份长篇文件中，这是一个巨大的浪费时间。

Answer 2

试试这个

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

OR

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

// EDITED ANSWER

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

如果启用了firebug，您可以看到正文样式标记中的更改。但有些如何不起作用。您可以将其作为参考，并尝试类似的方法获得解决方案。

Answer 3

我尝试了大多数，但并非所有元素都会显示光标。快速而肮脏的方法是迭代整个dom并为每个元素设置光标。

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

在这里执行ajax或其他操作。...接着：

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

Answer 4

虽然这不是对这个问题的直接答案，但我想提请注意我们可以以不同的方式解决问题。

通过将空的全屏div放在除拖放区之外的所有内容之上，在mousedown事件之后将其激活。因此，我们只需通过该div的:hover类来更改整个屏幕的光标即可。