javascript - Chrome 中的 .setCapture 和 .releaseCapture

Question

我有一个基于 HTML5 canvas 的 Javascript 组件，需要捕获和释放鼠标事件。在控件中，用户单击其中的一个区域并拖动以影响更改。在 PC 上，我希望用户能够在浏览器之外继续拖动，并且如果在窗口外释放按钮， Canvas 能够接收鼠标弹起事件。

但是，根据我的阅读，Chrome 不支持 setCapture 和 releaseCapture。

有解决办法吗？

Answer 1

一篇写于 2009 年的文章详细介绍了如何实现跨浏览器拖动，即使用户的光标离开窗口也会继续触发 mousemove 事件。

http://news.qooxdoo.org/mouse-capturing

这是文章中的基本代码:

function draggable(element) {
    var dragging = null;

    addListener(element, "mousedown", function(e) {
        var e = window.event || e;
        dragging = {
            mouseX: e.clientX,
            mouseY: e.clientY,
            startX: parseInt(element.style.left),
            startY: parseInt(element.style.top)
        };
        if (element.setCapture) element.setCapture();
    });

    addListener(element, "losecapture", function() {
        dragging = null;
    });

    addListener(document, "mouseup", function() {
        dragging = null;
    }, true);

    var dragTarget = element.setCapture ? element : document;

    addListener(dragTarget, "mousemove", function(e) {
        if (!dragging) return;

        var e = window.event || e;
        var top = dragging.startY + (e.clientY - dragging.mouseY);
        var left = dragging.startX + (e.clientX - dragging.mouseX);

        element.style.top = (Math.max(0, top)) + "px";
        element.style.left = (Math.max(0, left)) + "px";
    }, true);
};

draggable(document.getElementById("drag"));

这篇文章对正在发生的事情进行了很好的解释，但在假设知识的地方存在一些空白。基本上(我认为)，在 Chrome 和 Safari 中，如果你在文档上处理 mousemove 然后，如果用户单击并按住鼠标，即使光标离开窗口，文档也会继续接收 mousemove 事件。这些事件不会传播到文档的子节点，因此您必须在文档级别处理它。