能否避免在拖动小元素时改变CSS光标类型？

Question

能否避免在拖动小元素时改变CSS光标类型？

javascriptjquerycsshtml

3

具体来说，比如用户拖动滑块的手柄，由于鼠标不再悬停在手柄上，光标瞬间（因为捕捉）或较长时间（因为离轴拖动）会从手柄CSS中指定的光标发生变化。我创建了一个示例来说明这个问题。

我该如何避免这种情况？

编辑

Stephen Thomas 的答案不够充分，因为不同的元素可能有不同的图标，例如水平滑块处理程序获取 ew-resize，垂直滑块处理程序获取 ns-resize，我还没有找到一种可靠确定要“锁定”光标的方法。

第二次编辑

通过对 Jacob Grey 的答案进行一些微小的修改，我找到了一些符合我的需求的东西。我的调整添加了一个 CSS 规则，我可以在 <body> 上切换，以强制所有后代元素继承其光标。这个示例显示了 Jacob Grey 的解决方案和我的调整解决方案之间的行为差异。

<style> body.dragging { cursor: inherit !important; } </style>

<script>
    var disableDragCursorOverride = function() {
        $("body").removeClass("dragging");             
        $("html").css("cursor","auto")
                 .off("mouseup", disableDragCursorOverride);
    };

    $(selectorForDraggable).on("mousedown",function(e){
        var cursor = $(e.target).css("cursor");
        $("body").addClass("dragging");
        $("html").css("cursor",cursor)
                 .on("mouseup", disableDragCursorOverride);
    });
</script>

- Bjartr

1

你创建的这个示例在哪里？ - undefined

抱歉，我现在已经添加了链接。 - undefined

@Bjartr是我给出的答案，符合你的要求吗？ - undefined

2个回答

2

是的，这很容易实现。正如Stephen Thomas所说，您只需将其添加到body中即可，但您希望光标停留在您单击的位置。可以通过以下方式实现：

$('.slider').on("mousedown",function(e){
    var cursor = $(e.target).css("cursor");
    $("body").css("cursor",cursor);
});
$('body').on("mouseup",function(e){
    $("body").css("cursor","auto");
});

只要鼠标一直按下，jQuery会获取你所点击的光标并将其添加到页面中。

JSFiddle演示

- Jacob G

这看起来是解决方案的一部分，但是当将光标从垂直手柄移开时，保持正确的光标，但是当光标离开手柄但仍在轨道上时，光标仍然闪烁。似乎其他元素应用的规则仍然会覆盖在body上的光标规则（我尝试改变你的代码，始终添加"!important"，但没有成功）。在我写这个问题的时候，我想到了一个解决方案，我会将其添加到我的问题中，并将其标记为答案。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stephen Thomas · Accepted Answer

问题中没有提供太多细节，但一般的方法如下：

定义一个类似于以下CSS规则：

.dragging {
    cursor: pointer; /* or whatever */
}

当拖动开始时，将该类添加到<body>或某个父容器中：

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

拖动结束时，移除该类：

$('body').removeClass('dragging');