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来支持其他浏览器。

Chrome中的.setCapture和.releaseCapture

2 个答案: