Question

我想使svg的元素可拖动。当用户在svg上拖动时，我希望更改光标。但是我似乎无法使最后一部分起作用。

这是我所拥有的：

svg.addEventListener('contextmenu', function(e) {
    e.preventDefault();
        return false;
    });
svg.addEventListener('pointerdown', function(e) {
    if (e.pointerType === 'mouse' && e.buttons === 2) {
        svg.setPointerCapture(e.pointerId);
    }
    e.preventDefault();
    return false;
});
svg.addEventListener('gotpointercapture', function(e) {
    svg.classList.add('dragging');
    console.log('Start dragging');
});
svg.addEventListener('lostpointercapture', function(e) {
    svg.classList.remove('dragging');
    console.log('Stop dragging');
});

svg是svg元素（可以预测）的地方。

css：

svg.dragging {
    cursor: ew-resize;
}

我知道由于日志记录，捕获有效。该类也被设置。但是，在我放开鼠标按钮之前，光标一直是默认光标。

我已经尝试过的：

在调用setPointerCapture之前设置类。如：

...
if (e.pointerType === 'mouse' && e.buttons === 2) {
    svg.classList.add('dragging');
    svg.setPointerCapture(e.pointerId);
}
...

在超时中调用setPointerCapture：

...
if (e.pointerType === 'mouse' && e.buttons === 2) {
    svg.classList.add('dragging');
    window.setTimeout(function() {
        svg.setPointerCapture(e.pointerId);
    }, 10);
}
...

是的，最后一个正在一点点抓住稻草...

谁能告诉我该怎么做？

捕获指针时更改鼠标光标

0 个答案: