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事件.这些事件不会传播到文档的子节点,因此您必须在文档级别处理它.