在移动浏览器上缩放或滚动

Posted 2023-03-04

【中文标题】在移动浏览器上缩放或滚动

【英文标题】：Zooming or wheeling on a mobile browser

【发布时间】：2012-11-17 17:14:11

【问题描述】：

在桌面浏览器中，我通过标准鼠标滚轮或 DOMMouseScroll 事件检测鼠标滚轮的使用。因此，我可以更改画布（放大一种地图）。

现在我想把这个功能带给我的移动用户：我需要拦截标准的捏缩放手势（不缩放页面）。今天可能吗？是否可以获得手势的中心（用于本地化缩放和取消缩放）？

注意，它需要在android 4.2的标准浏览器上运行。其他浏览器/设备不在此问题的范围内，这可能会更容易。

【问题讨论】：

你也看过这个吗：***.com/questions/11517086/…

@Stephan 我没有。这很有趣，我现在正在测试它。它不是很精确（显然它没有得到操作系统解释的本地化缩放事件），但它可能是一种解决方法。谢谢。不要犹豫做出回答，这样我就可以向你扔 10 次代表；）

【参考方案1】：

这似乎是fixed on 3.0。这是a test page，似乎可以在我的 ICS 平板电脑上使用。这是链接测试页面的摘录：

// Touch events seem to work in ios, Android browser 3.0 and up,
// and various 3rd-party Android browsers, now including FireFox
// (Nightly as of 03-Feb-2012, not enabled by default yet).
eventTarget.addEventListener('touchstart', HandleTouchStart, false);
document.addEventListener('touchmove', HandleTouchMove, false);
document.addEventListener('touchend', HandleTouchEnd, false);
document.addEventListener('touchcancel', HandleTouchCancel, false);

【讨论】：

这可能会非常“方便”（所以请点赞），但这并不能直接做出捏缩放手势：我必须自己解释位置（这可能不是很好）为了猜测它是缩放还是取消缩放。

我从未听说过 gesture* 事件 :) 快速的谷歌搜索并没有启发我（尤其是在 Android 上），但我现在宁愿切换到本机应用程序 - 即使你肯定有正当理由坚持使用浏览器

我围绕 touchstart、touchmove 和 touchend 构建了我的解决方案，效果很好。你的回答是好的方向，谢谢。

【参考方案2】：

这个问题的答案指向一个可能有用的库 (Hammer.js)：How to detect android pinch zoom in javascript