捕捉 Mac 触控板缩放

Posted 2023-03-05

【中文标题】捕捉 Mac 触控板缩放

【英文标题】：Catching Mac trackpad zoom

【发布时间】：2013-03-03 05:59:08

【问题描述】：

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

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

【问题讨论】：

这有帮助吗？ ***.com/questions/2916081/…

不，正如我所说，我对鼠标滚轮没有问题

对。这篇 IBM 文章 ibm.com/developerworks/library/wa-games/… 向我指出了 IBM 似乎用来检测“触摸”事件的 Modernizr modernizr.com/docs。可能会有所帮助。

试试这个 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 ), 错误)

【参考方案1】：

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

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

        // perform desired zoom action here
    
);

【讨论】：

Chrome 45.0.2421.0 不再是这种情况。

@phpMyCoder 你有参考或提交吗？

@sgrove 不幸的是，我没有提交。但我确实有 Chrome 45.0.2421.0，并且可以确认它不再有。

@PhpMyCoder Google 在 maps.google.com 上使用此功能。许多在开发渠道中被删除的功能最终会在最终发布之前重新出现。希望他们要么保持原样，要么提供替代事件。

我在 Chrome 45.0.2454.101 上，我仍然得到 ctrlKey=true 来进行捏合缩放。大概这只是 2421 中的一个错误，已修复。

【参考方案2】：

Starting from Safari 9.1 您可以从 OSX 设备 捕捉缩放和旋转事件。如需更多信息，请阅读GestureEvent Class Reference。请注意，这仅适用于 Safari，但由于您的问题是关于“Mac 触控板缩放”，我认为这就是您要寻找的。​​p>

function zoom(e) 
  console.log(e.scale)
  e.preventDefault()

document.addEventListener('gesturestart', zoom)
document.addEventListener('gesturechange', zoom)
document.addEventListener('gestureend', zoom)

---

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

【参考方案3】：

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

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

这个解决方案在 Safari 中不起作用。

【参考方案4】：

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

【讨论】：

gesturestart 等不受桌面 Safari 支持。

【参考方案5】：

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