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, there is no event and what actually happens is zoom in/out of browser.

Is there a way to catch the zoom event performed with the trackpad?

Does this help? http://stackoverflow.com/questions/2916081/zoom-in-on-a-point-using-scale-and-translate — Andrew Grothe, Mar 14 '13 at 18:13
Right. This IBM article http://www.ibm.com/developerworks/library/wa-games/index.html?cmp=dw&cpb=dwwdv&ct=dwnew&cr=dwnen&ccy=zz&csr=080312 pointed me to Modernizr http://modernizr.com/docs/ which IBM seems to use to detect 'touch' events. Might help. — Andrew Grothe, Mar 14 '13 at 18:28
**TRY THIS** var total;document.body.addEventListener("mousewheel", function(e) {if (!e.ctrlKey) return; e.preventDefault(); e.stopImmediatePropagation(); if (total===undefined) total=0; if (e.deltaY==0) {total=undefined;return} total-=e.deltaY; console.log(total, e.deltaY)}, false) — Leonard Pauli, Aug 29 '16 at 23:36

score 27 · Answer 1 · answered Feb 23 '15 at 22:49

27

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
    }
});

answered Feb 23 '15 at 22:49

alexyaseen

319
3
5

5

As of Chrome 45.0.2421.0, this no longer is the case. – Bailey Parker Jun 08 '15 at 04:09
@PhpMyCoder Do you have a reference, or a commit for that? – sgrove Jun 09 '15 at 04:39
@sgrove Unfortunately, I don't have a commit. But I do have Chrome 45.0.2421.0, and can confirm it no longer does. – Bailey Parker Jun 09 '15 at 12:54
1

@PhpMyCoder Google uses this functionality on maps.google.com. Many features that get removed on the development channel end up making their way back in before the final release. Hopefully they either leave it intact or provide an alternative event. – alexyaseen Jun 11 '15 at 20:36
@alexyaseen In Chrome 45, google maps still works, so they must be capturing it another way. However, this means that it might be interesting to dig into their source and see how they do it. – Bailey Parker Jun 11 '15 at 20:49
4

I'm on Chrome 45.0.2454.101 and I still get ctrlKey=true for pinch-to-zoom. Presumably this was just a bug in 2421 which was fixed. – Dean Harding Oct 16 '15 at 12:16
It seems to work in Chrome 47.0.2526.80 - must have been a bug with 2421, as previously said – Jivan Dec 18 '15 at 16:13
Then, **e.deltaY** will be the delta change in (pixels??) between the two fingers. – Leonard Pauli Aug 29 '16 at 23:24
Note that the "mousewheel" event has been deprecated and replaced with the ["wheel" event](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event). I would like to edit the original answer with this, but the edit queue is full – sloreti May 12 '20 at 15:59

score 9 · Answer 2 · edited Mar 08 '19 at 09:25

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.

score 1 · Answer 3 · answered Nov 07 '14 at 16:59

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.

score 0 · Answer 4 · edited May 23 '17 at 12:25

0

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

edited May 23 '17 at 12:25

Community

1
1

answered Sep 13 '13 at 19:17

mechhfly

29
6

gesturestart etc. are not supported by desktop Safari. – Andy Swift Mar 17 '15 at 09:44

score -11 · Answer 5 · answered Sep 08 '13 at 14:06

-11

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

answered Sep 08 '13 at 14:06

Luigi De Rosa

710
3
11

Catching Mac trackpad zoom

5 Answers5

Linked

Related