Question

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

有些带有这种触控板的笔记本电脑（如Magic Trackpad和Force Touch Trackpad）。因此可以捕获手势，但如何在桌面Web应用程序中使用它们？

想象一下，您可以在桌面浏览器中捏合并放大我们的谷歌地图。并用手势左右摇动。

Answer 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!');
});

但是，如果您只想对布局中更改的视口做出反应，那么使用媒体查询等响应式设计功能可能会更好。

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

Answer 2

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

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

稍后编辑。对于Google Maps特定示例，视口设置如下，以便它使用自己的缩放库而不是嵌入的浏览器。

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

检测桌面浏览器中的捏合

2 个答案: