检测桌面浏览器中的捏合答案

【问题标题】：Detecting pinching in desktop browsers检测桌面浏览器中的捏合
【发布时间】：2015-07-25 08:50:33
【问题描述】：

因此，通过滚动事件，我可以检测桌面浏览器中的平移手势并相应地修改内容。但是有没有办法检测捏（缩放）手势？因此，我可以相应地修改 DOM 元素，而不是浏览器缩放整个网站（或不做任何事情）。

有些笔记本电脑配备了这种触控板（例如 Magic Trackpad 和 Force Touch Trackpad）。所以手势可以被捕获，但我如何在桌面网络应用程序中使用它们？

想象一下，您可以在桌面浏览器的 Google 地图中捏合和放大我们的地图。并通过手势左右平移。

【问题讨论】：

对缩放做出反应，而不是捏合。
但我不希望整个页面缩放。我只想修改它的一个子集。（想象一个嵌入的谷歌地图。我想在鼠标悬停在该地图上时检测到捏。）
你只是对缩放命令做出反应，你可以阻止事件处理程序的任何实际缩放，但它会在事件应该触发时触发（当捏合而不是从 KB 时）
如何检测桌面浏览器上的缩放命令？

标签： javascript dom desktop

【解决方案1】：

我建议使用一些专门的库，例如 hammer.js。查看hammer.js 文档的this example，他们在其中使用了捏合手势识别。

根据该示例，检测捏合手势可能很简单：

var myElement = document.getElementById('myElement'),
    mc = new Hammer.Manager(myElement),
    pinch = new Hammer.Pinch();

mc.add(pinch);
mc.on("pinch", function(ev) {
    console.log('You sir did just pinch!');
});

但是，如果您只想对布局中不断变化的视口做出反应，则最好使用媒体查询等响应式设计功能。

编辑：它不是那样工作的。那是因为桌面浏览器还不支持手势事件。然而，我的回答的第二部分仍然正确：您可以使用基于视口尺寸的媒体查询，并且您可以像往常一样挂钩窗口的调整大小事件。

【讨论】：

我不认为捏手势在桌面浏览器中与hammer.js 一起使用？至少在 Firefox 和 Chrome 中没有：hammerjs.github.io/browser-support
我不想缩放整个窗口。我只想修改文档的一个子集。想象一下嵌入式谷歌地图。我希望在捏住谷歌地图时，它会修改，但整个窗口应该保留。
好吧，它不适用于手势。如果有问题的元素可以从窗口中窃取焦点，您可能能够“破解”某些东西......就像 iframe 一样。

【解决方案2】：

我正在寻找同样的东西 - 只捏住特定的 DOM 元素而不是整个网页（让我们使用嵌入式绘图应用程序而不是谷歌地图示例）。

在 Chrome 和 Opera 的开发者控制台中，选择切换设备工具栏并选择触摸设备。按住 shift 键 + 鼠标左键可以模拟捏合。然后查看 monitorEvents ：https://developers.google.com/web/tools/chrome-devtools/debug/command-line/events?hl=en

此外，Hammer.js 有一个触摸模拟器库：

<script> TouchEmulator(); </script> function log(ev) { console.log(ev.touches); } document.body.addEventListener('touchmove', log, false);

稍后编辑。对于谷歌地图的具体例子，视口是这样设置的，所以它使用自己的缩放库而不是嵌入的浏览器。

   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">

【讨论】：