我正在尝试自定义光标的行为。现在它以下一种方式工作:在我使用的 mousemove 上:
scheme.setAttribute("cursor", "move");
鼠标向上:
scheme.setAttribute("cursor", "auto");
在这种情况下:
scheme.setAttribute("cursor", "-moz-grab");
scheme.setAttribute("cursor", "-webkit-grab");
光标仅适用于 -webkit(Chrome)。
虽然这种情况
scheme.setAttribute("cursor", "-webkit-grab");
scheme.setAttribute("cursor", "-moz-grab");
光标仅适用于-moz(FF)。
以下结构没有按我预期的那样工作:
scheme.setAttribute("cursor", "-moz-grab, -webkit-grab");
这个有效:
scheme.setAttribute("style", "cursor:-moz-grab; cursor:-webkit-grab;");
在两种浏览器中,但我 read here这是不好的做法。
代码here有效,但我需要使用类似 this 的结构和 that .
类似于 this (该结构现在不起作用)。
编辑1
从这里other Stack Overflow post :
解决方案使用:
scheme.setAttribute("cursor", "url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur) 4 4, move");
适用于两种浏览器,但仍需要使用 -moz-grab
和 -webkit-grab
值的解决方案。
而且它在 IE 中似乎不起作用(我希望看到第二个,保留移动图标)
编辑2
更清晰的 mousedown/mouseup 示例:
Case 1: (仅适用于 Chrome)
Case 2: (这里没有 mousedown 的变化)
最佳答案
按照J.Steve的回答:
.grabbable {
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
/* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
从这里CSS for grabbing cursors (drag & drop) 和这个评论
您确定逗号列表仍然有效吗?我正在使用光标:移动; 光标:-webkit-抓取;光标:-moz-grab;光标:捕获;与大多数 首选最后
如果您指定多种格式,则逗号列表有效 光标:url(example.svg#linkcursor)、url(hyper.cur)、指针
在我的例子中,我设置了 CCS 选项
item.setAttribute("style", "cursor: move; cursor: grab; cursor:-moz-grab; cursor:-webkit-grab;");
并取消设置
item.setAttribute("style", "cursor: auto;");
在我的取消事件(mouseup)之后。
JS:
var item = document.getElementById("changeCurArea");
item.addEventListener("mousedown", func, false);
item.addEventListener("mouseup", func1, false);
function func() {
item.setAttribute("style", "cursor: move; cursor: grab; cursor:-moz-grab; cursor:-webkit-grab;");
}
function func1() {
// item.setAttribute("cursor", "auto");
item.setAttribute("style", "cursor: auto;");
}
HTML:
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="350" viewBox="200 150">
<rect id="mySvgArea" width="400" height="350" stroke="black" fill="lightgrey"></rect>
<rect id="changeCurArea" x="100" y="100" width="200" height="150" stroke="red" fill="pink"></rect>
</svg>
关于javascript - 跨浏览器 GRAB 游标(-moz、-webkit),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31207650/