trackpad pinch/unpinch w/ javascript (MacBook)

Question

I am trying to use native javascript - no jQuery, that is. Pinch and Unpinch but not for zoom out/in. It is good on iOS and android using touches, etc. But I do not know how to "emulate" this behavior for my Mac-book's trackpad. Any help to get me started off in the right direction will be appreciated.

Answer 1

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 2

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 your "Mac-book's trackpad" I think this is what you are looking for.

---

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