jquery 是否为整个页面更改鼠标光标?

3gtaxfhh  于 2023-01-08  发布在  jQuery
关注(0)|答案(6)|浏览(144)

我有一个拖动UI程序,其中可拖动元素上的鼠标光标在单击时变为一只抓取手。
问题是,我允许拖动发生在屏幕上的任何地方,光标在锚标记上改变,等等...
我试过$('*').addClass('grabbing'),但它真的很贵。
有没有一种简单易行、代码高效的方法来处理这个问题?

pb3s4cty

pb3s4cty1#

在CSS级别执行此操作:

* {
   cursor: pointer;
}

在jquery中做这件事会迫使它迭代dom中的每一个节点并重写它的css类,对于一个很长的文档来说,这是一个巨大的时间浪费。

brccelvz

brccelvz2#

试试这个

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

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

//编辑答案

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

如果你的firebug是开着的,你可以看到body style标签的变化。但是有些是不起作用的。你可以把它作为一个参考,尝试类似的方法得到解决方案。

qlvxas9a

qlvxas9a3#

我尝试了其中的大部分,但并不是所有的元素都会显示光标,快速而肮脏的方法是迭代整个DOM,并为每个元素设置光标。

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

在这里执行 AJAX 或其他什么....然后:

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

8aqjt8rx4#

虽然这不是对这个问题的直接回答,但我想提醒大家注意,我们可以用不同的方法来解决这个问题。
通过在除拖放区之外的所有区域上放置一个空的全屏div,在mousedown事件后激活它。因此,我们可以通过该div的:hover类简单地更改整个屏幕的光标。

ymdaylpp

ymdaylpp5#

当你需要它的时候,你可以调用一行javascript:

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

当您想再次撤消它时,可以执行另一行:

document.body.removeAttribute('style');
gt0wga4j

gt0wga4j6#

您可以向页面/站点添加新样式表。
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);
});

相关问题