Catching Mac trackpad zoom

Question

Currently in my application i am catching the mouse wheel events and perform zoom in or out on a Canvas element. If user uses Mac and tries to perform zoom with the trackpad

Answer 1

As far as I know, the trackpad pinch doesn't trigger touch or gesture events, so Hammer.js will not detect it.

I was able to simulate pinch detection in Chrome by using Hamster.js. It will trigger the mouse wheel event and you can use the delta to determine if the user is zooming in or out.

This solution didn't work in Safari though.

Answer 2

There is no way to catch the pinch zoom-in/zoom-out of the trackpad with only Javascript

Answer 3

After looking around, does this help any ? it covers both web app and javascript in its discussion and comes to hammer.js as a possible solution to detecting pinch events... Simplest way to detect a pinch

Answer 4

At least in Chrome, trackpad "pinch-to-zoom" triggers a wheel/mousewheel event that appears as though the ctrl key is pressed. You can capture this event just like any other wheel/mousewheel event and prevent its default from occurring. Here is an example using jQuery:

$("canvas").on("mousewheel", function(e) {
    if (e.ctrlKey) {
        e.preventDefault();
        e.stopImmediatePropagation();

        // perform desired zoom action here
    }
});

Answer 5

Starting from Safari 9.1 you can catch zoom and rotation events from OSX devices. For more information read the GestureEvent Class Reference. Note that this only works in Safari but since your question was about "Mac trackpad zoom" I think this is what you are looking for.

function zoom(e) {
  console.log(e.scale)
  e.preventDefault()
}
document.addEventListener('gesturestart', zoom)
document.addEventListener('gesturechange', zoom)
document.addEventListener('gestureend', zoom)

---

Side note: these events are also supported in Safari on iOS.