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 然后，如果用户单击并按住鼠标，即使光标离开窗口，文档也会继续接收 mousemove 事件。这些事件不会传播到文档的子节点，因此您必须在文档级别进行处理。

Answer 2

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

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