javascript - .setCapture and .releaseCapture in Chrome -
i have html5 canvas based javascript component needs capture , release mouse events. in control user clicks area inside , drags affect change. on pc user able continue dragging outside of browser , canvas receive mouse event if button released outside of window.
however, according reading setcapture , releasecapture aren't supported on chrome.
is there workaround?
an article written in 2009 details how can implement cross-browser dragging continue fire mousemove events if user's cursor leaves window.
http://news.qooxdoo.org/mouse-capturing
here's essential code 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 pretty explanation of what's going on, there few gaps knowledge assumed. (i think), in chrome , safari, if handle mousemove on document then, if user clicks down , holds mouse, document continue receiving mousemove events if cursor leaves window. these events not propagate child nodes of document, have handle @ document level.
Comments
Post a Comment