如何在浏览器（最好是chrome）中模拟触摸手势？

Question

本题的目的是学习如何测试移动设备上触摸事件的JS事件监听器。

Answer 1

在 Chrome 上，按 F12 切换开发者模式。

然后，在开发者部分的左上角，您将看到一个小图标，上面写着“切换设备模式”（Ctrl/CMD + Shift + M）

然后，您可以在顶部切换设备。

这将模仿真实设备所做的触摸手势。

Answer 2

如果您进入开发人员工具 (F12)，进入响应式设计模式 (Ctrl + Shift + M) 并选择支持触摸的设备，您可以对其进行更改，以便在与页面交互时触发触摸事件（而不是鼠标事件） ).

Answer 3

我会推荐Hammerjs的触摸模拟器。它可以像 Chrome 一样提供触摸事件，但也可以提供多点触摸事件（特别是捏合）。 在开发时很容易将其安装在您的页面上。 我用它来测试用 Fulcro (React) 编写的东西。完美运作。

Answer 4

Answer 5

触摸事件有4种：touchstart、touchmove、touchend、touchcancel。如果您想模拟触摸移动（即手指按下时单击并移动），那么您可以向窗口或元素添加一个事件侦听器，并且该事件的每次触发都会触发您分配的回调。回调将接收整个事件，最好从

console.log()

开始整个事件并查看其中对您有用的内容。

例如，touchmove事件将有一个名为touches的数组，其中包含名为touch的对象。如果有 2 个手指向下，数组中将有两个项目，每个项目都有 pageX 和 pageY 属性，这将为您提供该手指的位置（尽管无法在开发工具中模拟多个手指 - 所以您可以仅使用第一项([0]))。

window.addEventListener("touchmove", (event) => { do something with event);