CODEWITHSUNDEEP
javascripttouchinternet-explorer-10
Sir Code-A-Lot
Sir Code-A-Lot

Reputation: 595

Detecting pinch/zoom in IE10 without preventing default behavior

In Javascript, I'm trying to detect when the user is pinching, and at the same time allow them to do so.

var elm = $("#wrapper")[0];
var myGesture = new MSGesture();
myGesture.target = elm;

elm.addEventListener("MSGestureChange", handleGesture);         
elm.addEventListener("MSPointerDown", function (e) {
    myGesture.addPointer(e.pointerId);
});

I'm getting the MSPointerDown event.

But as far as I can tell, I'm required to style the element in question (#wrapper) with -ms-touch-action: none (or pan-y pan-x) to be able to recieve the MSGestureChange event when pinching.

I don't want to prevent the default pinch behavior, so what are my options?

Is there a way around this, or am I stuck doing one or the other?

Upvotes: 4

Views: 3200

Answers (2)

adam
adam

Reputation: 1087

note this comment is now obsolete with the final release of Windows 8

In reading the doc applying the css style you've specified -ms-touch-action:none is what tells the browser that for that element, that the application should produce the javascript event that you want to catch. So, effectively, I don't believe it's possible to have your cake and eat it too, either you get the JS event, or you get the built-in behavior ( http://msdn.microsoft.com/en-US/library/ie/hh673557.aspx ).

Upvotes: 0

robocat
robocat

Reputation: 5413

You can detect zoom changes by checking the ratios of a few window/document/screen variables - see http://jsbin.com/abuzaz/8

Detect zoom changes by registering events on the window onscroll and onresize events. If you are worried about a resize or scroll event getting "lost" (it can happen) then an ugly solution could be to also register a slow interval timer to double check.

You can detect the current pinch-zoom level by looking at the ratio of the document.documentElement.offsetHeight to the window.innerHeight - but this might be due to bugs/quirks (see below!).

You can detect the page zoom (ctrl-+) level by looking at changes to the screen.deviceXDPI in the onresize event.

For more fun, have a play with the green box on http://jsbin.com/otocer/12 - touch one finger then the other and you get a MSPointerCancel event when the second finger touches. But touch both at the same time and you get no event.

You often get a window scroll event when touch-zooming, but I am unsure you can depend 100% on it. It seems you get a window resize event at the end of touch-zooming (but maybe not always - see http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/1065f624-32a8-4c80-8ced-998ba624763e)- try http://jsbin.com/otocer/17

Note that touch-zooming (not page zoom) has some big bugs:

Upvotes: 3

Related Questions