Chrome中的.setCapture和.releaseCapture

Question

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

但是，据我所知，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事件。这些事件不会传播到文档的子节点，因此您必须在文档级别处理它。

Answer 2

Chrome支持setPointerCapture，这是W3C Pointer events推荐的一部分。因此，另一种方法是使用指针事件和这些方法。

您可能希望使用jquery Pointer Events Polyfill来支持其他浏览器。