internet explorer 11 - Handle multiple pointer events in IE11 Metro/Mobile with pan-x and pan-y touch-action allowed -


i have web application want handle pinch zooming gesture in javascript rather allowing browser scale of ui. in ie11, it's understanding need specify touch-action css on element wish handle pointer events for.

in application, i've disabled touch behavior except panning (touch-action: pan-x pan-y). i've wired pointerdown, pointerup, , pointermove events in javascript , i've added own calculations determine level of zoom perform based on distance between 2 active pointers (pinch gesture).

in ie11 on desktop, works i'd expect; however, on mobile/metro version of ie (i've been testing on surface pro), can never seem detect more 1 pointer event @ given time. fires pointercancel on first captured event , fails fire second pointerdown. if disable touch gestures (touch-action: none), i'm able multi-touch pointer events in mobile browser well, no longer allows panning, undesirable.

here's simple jsfiddle demonstrates issue:

http://jsfiddle.net/wqgg0ly7/22/

$(document).ready(function() {     var pointers = [];      function pointerdown(e)     {         pointers.push(e);          if (pointers.length >= 2)             alert("multiple pointers detected");     };      function pointerout(e)     {          (var in pointers)              if (pointers[i].pointerid == e.pointerid)                  pointers.splice(i, 1);     };      $(".container")         .on("pointerdown", pointerdown)         .on("pointerout", pointerout)             .on("pointercancel", pointerout);     }); }; 

if test in desktop version of ie11 on touch-enabled device, can pinch either 1 of these divs , you'll see alert 2 pointers detected. doing same test in ie11 mobile, , first div detect second pointer; however, doesn't allow panning second div.

is bug in ie metro or there work-around allow panning on element still capture multiple pointer events?


Popular posts from this blog