Question: 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?

Answer: 
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:

* body scrollbars are totally wrong if body size changed after pinch-zoom - see <http://jsbin.com/abuzaz/1> - or see <http://connect.microsoft.com/IE/feedback/details/779009/ie10-pinch-zoom-doesnt-adjust-scrollable-area-size-after-body-size-is-changed>
* `position:fixed` is wierd - see <http://jsbin.com/iciqaf/1> (pink fixed position box can go off viewport if pinch-zoomed then scrolled).
* using CSS `html { -ms-touch-action: pan-x pan-y; }` disables pinch-to-zoom, but can make the page text unreadably small (depending on device, configuration, and page size), and I couldn't see that `-ms-viewport` would fix that.
**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> ).