Question

我的网站上有一个可自由调整大小的元素。这是通过边缘上的4个手柄完成的。在悬停这些手柄时，在调整元素大小时，我想显示相应的调整大小箭头。

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

谷歌地图在移动地图时用手形光标做同样的事情。所以我的问题是如何实现这一效果。

我目前（相关）的来源：

function startObjectScaling(e){
    e.stopPropagation();
    e.preventDefault();
    document.documentElement.style.cursor = this.style.cursor;
    window.addEventListener("mouseup", stopObjectScaling, false);
}

function stopObjectScaling(e){
    e.stopPropagation();
    document.documentElement.style.cursor = '';
    window.removeEventListener("mouseup", stopObjectScaling);
}

[...]

var tg = document.getElementById("transformGadget");
var handle = tg.firstChild.nextSibling;
for(var i=0;i<4;i++){
    handle.addEventListener("mousedown", startObjectScaling, false);
    handle = handle.nextSibling;
}

Answer 1

为此目的，在更现代的浏览器中实现了一项特殊功能。名称为setCapture()。它将所有鼠标输入重定向到调用该方法的对象。现在，该元素上的一个简单的css cursor 定义足以存档所需的效果。鼠标释放后，此效果停止（确保安全性）。它也可以通过调用releaseCapture

手动停止

示例：

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

Answer 2

如果在按住鼠标时箭头光标随处可见。

您依靠潜在的操作系统怪癖来创建您的行为。这不是你可以永远保持真实的东西。但是，一旦你开始一个mousedown，无论你把鼠标移动到哪里，那个点上的光标通常都会保持不变，UNTIL别的东西（你可能鼠标悬停的另一个窗口？桌面？系统中断？）更改光标。

换句话说，不要依赖这种行为。找一些适合你的东西。如果您必须这样做，请重新检查您的业务要求。

自定义光标在浏览器窗口之外

2 个答案: