Chrome中的.setCapture和.releaseCapture [英] .setCapture and .releaseCapture in Chrome

问题描述

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

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

是否有解决方法？

解决方案

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

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

以下是文章中的基本代码：

 函数draggable（元素）{
 var dragging = null; 
 $ b 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（）; 
}）; 
 $ b addListener（element，losecapture，function（）{
 dragging = null; 
}）; 
 $ b addListener（document，mouseup，function（）{
 dragging = null; 
}，true）; 
 
 var dragTarget = element.setCapture？元素：文档; 
 $ b 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中，如果您在文档上处理鼠标移动，那么，如果用户单击并保持鼠标，即使光标离开窗口，文档也会继续接收鼠标移动事件。这些事件不会传播到文档的子节点，因此您必须在文档级别处理它。

I have an HTML5 canvas based Javascript component that needs to capture and release mouse events. In the control the user clicks an area inside it and drags to affect a change. On PC I would like the user to be able to continue dragging outside of the browser and for the canvas to receive the mouse up event if the button is released outside of the window.

However, according to my reading setCapture and releaseCapture aren't supported on Chrome.

Is there a workaround?

解决方案

An article written in 2009 details how you can implement cross-browser dragging which will continue to fire mousemove events even if the user's cursor leaves the window.

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

Here's the essential code from the article:

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"));

The article contains a pretty good explanation of what's going on, but there are a few gaps where knowledge is assumed. Basically (I think), in Chrome and Safari, if you handle mousemove on the document then, if the user clicks down and holds the mouse, the document will continue receiving mousemove events even if the cursor leaves the window. These events will not propagate to child nodes of the document, so you have to handle it at the document level.

这篇关于Chrome中的.setCapture和.releaseCapture的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！