跨浏览器抓取光标(-moz，-webkit)

Question

我正在尝试自定义光标的行为。现在，它接下来的工作方式是:在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;");

在这两种浏览器中，但我在这里读，这是不好的做法。

代码这里可以工作，但我需要使用像这和那这样的结构。

类似于这 (这种结构现在不起作用)。

编辑1

从这个其他堆叠溢出柱

解决方案使用：

scheme.setAttribute("cursor", "url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur) 4 4, move");

这两种浏览器都可以工作，但仍然需要使用-moz-grab和-webkit-grab值的解决方案。

链接在这里

而且它似乎在IE中不起作用(我希望看到第二，保留移动图标)。

编辑2

更清晰的鼠标向下/鼠标向上的例子：

案例1： (只工作Chrome)

案例2： (这里鼠标向下没有变化)

Answer 1

根据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 (拖放)和这个评论

你确定逗号列表还能用吗？我使用的是游标:移动；游标：-webkit-；游标：-moz-grab；

如果要指定多种格式，如游标:url()、url(hyper.cur)、指针，则逗号列表可以工作。

在我的例子中，我设置了CCS选项。

item.setAttribute("style", "cursor: move; cursor: grab; cursor:-moz-grab; cursor:-webkit-grab;");

并将其取消

取消事件后的item.setAttribute("style", "cursor: auto;"); (Mouseup)。

http://jsfiddle.net/gwau7r9r/

联署材料：

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>