javascript - HTML5 'touchmove' event does not fire on canvas if started outside of it -

when try swipe on canvas starting outside of it, event listener attached 1 not receive 'touchmove' event. in other words, need register touchmove bagan on parent node.

is there way propagate event parent element canvas? solution including opensource jquery plugins acceptable.

thanks in advance!

the main problem approach events captured on parent element going propagate child elements. possible solution listen touch or mouse events on parent node , check if finger touching outside elements. if dispatch mousemove or touchmove events on canvas capture event on canvas.

we test mouse pointer on canvas area , dispatch touch event on case. way event captured canvas when finger reaches canvas area.

i've created snippet illustration. i've provided example mousemove events, can extend touchmove events too. didn't included canvas event listener main part, consoled simple message.

html:

<div class="canvas-holder">     <canvas id="canvas" width=300 height=300></canvas> </div> 

js:

var canvasholder = document.getelementsbyclassname('canvas-holder')[0]; var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var offsetx = canvas.offsetleft; var offsety = canvas.offsettop;  ctx.fillstyle = "rgba(255,0,0,1)"; ctx.fillrect(0, 0, canvas.width, canvas.height);  var canvasposleft = canvas.getboundingclientrect().left; var canvaspostop = canvas.getboundingclientrect().top; var canvasposright = canvas.getboundingclientrect().right; var canvasposbottom = canvas.getboundingclientrect().bottom;  var event = document.createevent('mouseevents'); event.initmouseevent('mousemove', true, true, window, 1, 100, 100, 100, 100);  // listen event. canvas.addeventlistener('mousemove', function (e) {      // main logic here...     console.log('mouse triggered'); }, false);  canvasholder.addeventlistener('mousemove', function(e) {     e.stoppropagation();     var posx = e.clientx;     var posy = e.clienty;      if ((posx < canvasposleft || posx > canvasposright ) ||         (posy < canvaspostop || posy > canvasposbottom ))  {          // dispatch event.         canvas.dispatchevent(event);          } }); 

and here fiddle:

fiddle