javascript - 捕捉 Mac 触控板缩放

Question

目前在我的应用程序中，我正在捕捉鼠标滚轮事件并在 Canvas 元素上执行放大或缩小。如果用户使用 Mac 并尝试使用触控板执行缩放，则不会发生任何事件，实际发生的是放大/缩小浏览器。

有没有办法捕捉使用触控板执行的缩放事件？

Answer 1

至少在 Chrome 中，触控板“捏合缩放”会触发滚轮/鼠标滚轮事件，看起来好像按下了 ctrl 键。您可以像任何其他滚轮/鼠标滚轮事件一样捕获此事件，并防止其默认发生。下面是一个使用 jQuery 的例子：

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

        // perform desired zoom action here
    }
});

Answer 2

从 Safari 9.1 开始，您可以从OSX 设备捕获缩放和旋转事件。有关更多信息，请阅读GestureEvent 类参考。请注意，这仅适用于 Safari，但由于您的问题是关于“ Mac触控板缩放”，我认为这就是您要寻找的。

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

---

旁注：iOS 上的 Safari 也支持这些事件。

Answer 3

据我所知，触控板捏合不会触发触摸或手势事件，因此 Hammer.js 不会检测到它。

我能够使用 Hamster.js 在 Chrome 中模拟夹点检测。它将触发鼠标滚轮事件，您可以使用增量来确定用户是放大还是缩小。

但是，此解决方案在 Safari 中不起作用。

Answer 4

环顾四周，这有帮助吗？它在讨论中涵盖了 web 应用程序和 javascript，并将hammer.js 作为检测夹点事件的可能解决方案......检测夹点 的最简单方法

Answer 5

仅使用 Javascript 无法捕捉触控板的捏放大/缩小