为整个页面更改鼠标 Cursor？

Question

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

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.

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

Answer 1

Do it at the CSS level:

* {
   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.

Answer 2

try this

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

OR

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

//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.

Answer 3

Though this is not a direct answer to this question but I want to draw attentions to that we can solve the problem differently.

By putting an empty fullscreen div on top of everything except drop zones, activate it after mousedown event. So we can simply change cursor for entire screen through :hover class of that div .

Answer 4

I tried most of these, but not all elements will display the cursor. The quick and dirty method is to iterate the entire dom and set the cursor for each element.

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

Execute ajax or whatever here....Followed by:

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

Answer 5

When you need it, you can invoke a single line of javascript:

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

When you want to undo it again, you can execute another single line:

document.body.removeAttribute('style'); 

Answer 6

You can add a new stylesheet to the page/site.

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);
});