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?