整个页面更改鼠标光标？

I have a drag UI program, where the mouse cursor on the draggable element changes to a grabbing hand on click.

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

The problem is, I allow the drag to happen anywhere on screen, and the cursor changes over anchor tags, etc...

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

I've tried $('*').addClass('grabbing'), but it's REALLY expensive.

我试过$（'*'）。addClass（'抓取'），但它真的很贵。

Is there a simple easy code efficient way to handle this?

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

3 个解决方案

#1

Do it at the CSS level:

在CSS级别执行：

* {
   cursor: pointer;
}

doing it in jquery forces it to iterate every single node in the dom and rewrite its css classes. On a long document, that's a huge waste of time.

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

#2

try this

尝试这个

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

要么

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

//EDITED ANSWER

// EDITED ANSWER

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

If you firebug is on, you can see the changes in body style tag. But some how it's not working. You can take it as a reference and try similar approach the get solution.

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

#3

The only way I can think of to do this is pretty hacky.

我能想到的唯一方法是做到这一点非常hacky。

Create a DIV that has a z-index of something higher than everything else on that page, and has the cursor you want. Enable that div whenever the mouse cursor goes down. Sample code:

创建一个d-index，其索引值高于该页面上的所有其他内容，并具有您想要的光标。只要鼠标光标停止，就启用该div。示例代码：

<html><body style="width: 100%; height: 100%;">
<DIV id="cover" style="position: absolute; width: 100%; height: 100%; zindex: 5000; top: 0px; left: 0px; cursor: pointer; background: transparent; display: none;">&nbsp;</div>

<ul><li>One</li><li>Two</li><li>Three</li></ul>

<script>
   window.document.body.onmousedown = function ()
   {
      document.getElementById('cover').style.display = '';
   };

   window.document.body.onmouseup = function ()
   {
      document.getElementById('cover').style.display = 'none';
   };
</script>

</body></html>

#1