.setCapture and .releaseCapture in Chrome

Question

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

However, according to my reading, setCapture and releaseCapture are not supported in Chrome.

Is there any workaround?

Answer 1

An article written in 2009 describes how you can implement browser cross-drag that will continue to trigger mousemove events even if the user cursor leaves the window.

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

Here is the main 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 provides a pretty good explanation of what is happening, but there are several gaps in which knowledge is supposed. Basically (I think) in Chrome and Safari, if you are processing mousemove in a document, then if the user clicks and holds the mouse, the document will continue to receive mousemove events, even if the cursor leaves the window. These events will not propagate to the child nodes of the document, so you will have to process them at the document level.

Answer 2

Chrome supports setPointerCapture , which is part of the W3C Recommendation Pointers . Thus, an alternative would be to use pointer events and these methods.

You might want to use the jquery Polyfill Pointer Events to support other browsers.