8

我的网站上有一个可以自由调整大小的元素。这是由边缘上的 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;
}
4

2 回答 2

4

为此目的，在更现代的浏览器中实现了一个特殊功能。名称是setCapture()。它将所有鼠标输入重定向到调用该方法的对象。现在该元素上的简单 css光标定义足以归档所需的效果。鼠标释放后，此效果停止（为了安全起见）。也可以通过调用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();
}
于 2011-01-04T22:42:07.937 回答
-1

如果按住鼠标时箭头光标在任何地方都可见。

您依靠潜在的操作系统怪癖来创建您的行为。这不是你可以假设永远成立的事情。但是，一旦您开始鼠标按下，该点的光标通常会保持不变，无论您将鼠标移动到哪里，直到其他东西（您可能将鼠标悬停的另一个窗口？桌面？系统中断？）改变光标。

换句话说，不要依赖这种行为。找到其他对你有用的东西。如果您必须这样做，请重新检查您的业务需求。

于 2010-11-03T16:30:55.220 回答