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

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -