Javascript 拖动一个小元素时，是否可以避免在CSS光标类型之间进行更改？

特别是在用户拖动滑块手柄的情况下，由于鼠标不再位于手柄上方，光标瞬间（由于捕捉）或更长时间（由于离轴拖动）从手柄css中指定的光标更改。我创建了一个示例来说明这个问题

我怎样才能避免这种情况

---

编辑

Stephen Thomas的回答是不够的，因为不同的元素可能有不同的图标，例如水平滑块处理程序获得ew resize，垂直滑块处理程序获得ns resize，我还没有找到可靠的方法来确定将光标“锁定”到什么位置。

---

编辑第二个

对雅各布·格雷的回答做了一些小改动后，我找到了适合我需要的东西。我的调整添加了一个css规则，我可以打开

，强制所有子元素继承其光标。显示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>

body.drawing{cursor:inherit！important；}
var disableDragCursorOverride=函数（）{
$（“body”）.removeClass（“拖动”）；
$（“html”）.css（“光标”、“自动”）
.off（“鼠标悬停”，故障牵引或超越）；
};
$（SelectorForDragable）.on（“鼠标向下”，函数（e）{
var cursor=$（e.target）.css（“cursor”）；
$（“body”）.addClass（“拖动”）；
$（“html”）.css（“光标”，光标）
.on（“鼠标悬停”，故障牵引装置）；
});

问题中没有太多细节，但作为一般方法：

定义CSS规则，如下所示：

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

开始拖动时，将该类添加到

或某个父容器中：

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

拖动结束时，删除类：

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

---

问题中没有太多细节，但作为一般方法：

定义CSS规则，如下所示：

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

开始拖动时，将该类添加到

或某个父容器中：

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

拖动结束时，删除类：

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

---

是的，很容易做到。正如Stephen Thomas所说，您可以将其添加到

正文中，但您希望光标与您单击的光标相同。可以这样做：

$('.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就会获取您所单击内容的光标，并将其添加到主体中

是的，很容易做到。正如Stephen Thomas所说，您可以将其添加到
正文中，但您希望光标与您单击的光标相同。可以这样做：

$('.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就会获取您所单击内容的光标，并将其添加到主体中

您创建的示例在哪里？很抱歉，我添加了链接now@Bjartr我的答案是你想要的吗？你创建的示例在哪里？很抱歉，我添加了链接now@Bjartr我的答案是你想要的吗？对不起，我忘了包括示例链接，我现在已经添加了它。这是不够的，因为不同的元素可能有不同的图标，例如，水平滑块处理程序获得
ew resize
和垂直滑块处理程序获得
ns resize
，我还没有找到可靠的方法来确定将光标“锁定”到什么位置。对不起，我忘了包括示例链接，我现在已经添加了它。这是不够的，因为不同的元素可能有不同的图标，例如水平滑块处理程序获得
ew resize
和垂直滑块处理程序获得
ns resize
，我还没有找到可靠的方法来确定将光标“锁定”到什么位置。这看起来是解决方案的一个很好的部分，但是，当垂直移动光标离开控制柄时，会保持正确的光标，当光标离开控制柄但在轨迹上方时，光标仍会闪烁。似乎其他元素应用的规则仍然覆盖了主体上的光标规则（我尝试更改了您必须始终附加“！important”的内容，但没有成功）。当我写这篇文章时，我想出了一个解决方案，我会把它添加到我的问题中，并将其标记为答案。这看起来是解决方案的一个很好的部分，但是当垂直移动光标离开控制柄时，保持正确的光标，光标离开控制柄但在轨迹上时仍然闪烁。似乎其他元素应用的规则仍然覆盖了主体上的光标规则（我尝试更改了您必须始终附加“！important”的内容，但没有成功）。当我写这篇文章的时候，我想出了一个解决方案，我会把它添加到我的问题中，并把它标记为答案