How can I keep the browser pinch to zoom and use the hammer.js pinch events?

Question

Here is my code... just a simple test as I have never used hammer.js before:

var hammerTime = new Hammer($('#hammerTarget').get(0));

hammerTime.add(new Hammer.Pinch({event: 'pinch'})); // Add pinch gesture events.

hammerTime.on('pinchin', function(event) {
    console.log('hammer pinchin');

}).on('pinchout', function(event) {
    console.log('hammer pinchout');

}).on('pinchend', function(event) {
    console.log('hammer pinchend');
});

This works fine, I can detect the pinch, but now on my pinch target I can't zoom the browser any more? How can I use the pinch event and allow the default browser pinch zooming? I need to do some stuff on pinch but I still want people to be able to zoom in.

I'm using hammer.js 2.0.4 in case it matters.

Answer 1

I was having a hard time with this too, until I came across the touch-action property. by setting it to auto, hammer stops blocking the events, and allows the browser to do it's own zoom.

var hammerTime = new Hammer($('#hammerTarget').get(0), {touchAction : 'auto'});

hammerTime.add(new Hammer.Pinch({event: 'pinch'})); // Add pinch gesture events.

hammerTime.on('pinchin', function(event) {
    console.log('hammer pinchin');

}).on('pinchout', function(event) {
    console.log('hammer pinchout');

}).on('pinchend', function(event) {
    console.log('hammer pinchend');
});

See the doc : http://hammerjs.github.io/touch-action/