How can I hold the browser to zoom in and use hammer.js pinch events?
Here's my code ... just a simple test as I've 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 great, I can detect a pinch, but now, for my purpose, I can no longer increase the browser? How can I use the pinch event and allow the default browser zoom scaling? I need to do something on the pinch, but I still want people to be able to zoom in.
I am using hammer.js 2.0.4 in case it matters.
+3
source to share
1 answer
I also had a hard time with this until I came across the touch-action property. setting it to automatic, the hammer stops blocking events and allows the browser to do its 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');
});
+4
source to share