Javascript 浏览器窗口外的自定义光标

我的网站上有一个可以自由调整大小的元素。这是由边缘上的4个控制柄完成的。在悬停这些控制柄和调整元素大小时，我希望显示相应的调整大小箭头

目前，我通过将body/root的css光标样式设置为这些箭头来实现此行为。关于它的问题是对浏览器窗口的客户端区域的限制。如果在按住鼠标的同时，箭头光标在任何地方都可见，那么在视觉上会更加一致，也不会那么混乱

谷歌地图在移动地图的同时也在用手光标做同样的事情。因此，我的问题是如何实现这种效果对我自己

我目前（相关）的资料来源：

函数开始对象缩放（e）{
e、 停止传播（）；
e、 预防默认值（）；
document.documentElement.style.cursor=this.style.cursor；
addEventListener（“mouseup”，stopObjectScaling，false）；
}
函数stopObjectScaling（e）{
e、 停止传播（）；
document.documentElement.style.cursor=''；
removeEventListener（“mouseup”，stopObjectScaling）；
}
[...]
var tg=document.getElementById（“transformGadget”）；
var handle=tg.firstChild.nextSibling；
对于（var i=0；i
如果在按住鼠标时箭头光标在任何地方都可见

您正依赖操作系统的一个潜在怪癖来创建您的行为。您不能假设这一点始终成立。但是，一旦您开始鼠标向下移动，该点上的光标通常会保持不变，无论您将鼠标移动到何处，直到发生其他情况（另一个您可以将鼠标移到桌面上的窗口？系统中断？）更改光标

换句话说，不要依赖于这种行为。找到其他对你有用的东西。如果你必须这样做，重新检查你的业务需求。
在更现代的浏览器中有一个专门用于此目的的功能。名称是。它将所有鼠标输入重定向到调用该方法的对象。现在，一个简单的css游标该元素上的r定义足以存档所需的效果。鼠标释放后，此效果将停止（为确保安全）。也可以通过调用

例如：

<style type="text/css">
#testObj {
    /* this cursor will also stay outside the window.
       could be set by the script at the mousedown event as well */
    cursor: hand;
}
</style>

你现在有什么代码/标记？对我来说，Chromium上的Google Maps光标只有在我离开窗口而不浏览页面的任何其他部分时才会停留在手上；否则，它会恢复为正常的光标。不幸的是，我认为这意味着你可能无法获得100%的问题解决方案。我在Firefox和Chrome上测试了它它工作得很好-它比我目前的解决方案好一些。你要求控制超出你控制范围的东西-这是不可能的合理要求，更不用说尝试并可靠地实现了。在受限制的拖动情况下，它不合理吗？（确切地说：鼠标在客户端区域向下移动，同时按住鼠标按钮）在浏览器中实现它不是很明智吗（我想他们已经实现了…）？这是一个猜测，我没有通过快速搜索找到任何关于它的信息，但我认为这不是操作系统的怪癖，而是浏览器供应商的一种行为（是的，所有人都这么认为）实现-就像鼠标在客户端区域外协调更新一样，如果你按住鼠标左键，而不是右键。他们这样做是为了让这些类型的应用程序正常工作。我仍然认为这是操作系统的一个怪癖，因为光标绘制应该由GDI或WM管理。如果我将鼠标放在一个旋转的窗口上我得到了微调器。我没有特意尝试在任何系统上测试这一点，因此，如果您构建了一个工作测试平台，其中包括Gnome、KDE、Windows、MacOS和Chrome、Firefox、Safari和IE，每个应用程序中都有光标更改，并随光标更改拖出边界，以及随光标更改拖出边界，请确保并让我知道。直到然后，我将继续我的理解。我还将指出，如果他们所有人都一致，那么你可能错了。浏览器供应商甚至不能让元素间距100%一致。你希望他们让鼠标行为一致吗？我很高兴你找到了问题的答案。谢谢你更新页面。
<style type="text/css">
#testObj {
    /* this cursor will also stay outside the window.
       could be set by the script at the mousedown event as well */
    cursor: hand;
}
</style>

document.getElementById('testObj').onmousedown = function(e){

    // these 2 might be useful in this context as well
    //e.stopPropagation();
    //e.preventDefault();

    // here is the magic
    e.target.setCapture();
}