2

假设我有四个手指向下：元素 A 中的两个手指 (1, 2) 和元素 B 中的两个手指 (3, 4)。

假设我然后移动手指 1 和手指 3。

我应该查看一个包含手指 1 和 3的touchmove事件。changedTouches

但是会targetTouches包含什么？它会包含 1 和 2，或 3 和 4，还是全部 4？

似乎提供足够信息的唯一方法是发送两个 touchmove事件，即 1 和 2 在同一个元素上，而 3 和 4 都在不同的元素上。

我正在构建一个触摸框架，并且我一直在构建一个跟踪所有手指及其目标的全局数据结构，所以我确实知道发生了什么，但我想知道如果targetTouches事件可以为我提供所有这些，是否可以完全跳过这样做必要的信息。

我touchstart在我的页面上对其进行了测试：

触摸启动

document.touchstart = function(evt) { console.log("touchstart", evt.targetTouches); }

我按照上面描述的顺序放下四根手指。接下来，我将尝试查看是否可以找出 targetTouches 包含的内容touchmove，因为它会生成多少数据，所以这是一项更困难的任务。

4

1 回答 1

1

我将在 iOS6.0 (iPhone 5)、iOS5.1.1 (iPad 3)、Android 4.2.1 (Chrome 18.0.1025469) 上的 Nexus 7 和 Nexus 7 上的 Firefox for Android 17 上发布我的发现。

目前只有 iPhone 5 的数据。这是很多工作。

我所做的是在页面和touchstart调用中创建两个元素preventDefault()以防止滚动。然后我计算了它和缓冲区touchmove的长度并将其显示在 DOM 中。此外，我计算了事件发生的速率。这是代码片段：changedTouchestargetTouches

// exposed is a variable which other code uses rAF to present a representation of it on the DOM so I can view it
touchmove: function(evt) { 
    evt.preventDefault(); 
    var time = Date.now();
    var diff = time - exposed.touch_move_last_time; 
    if (!exposed.touch_move_last_time) exposed.touch_move_last_time = Date.now();
    if (!exposed.touch_move_rate) exposed.touch_move_rate = 0;
    exposed.touch_move_last_time = time;
    exposed.touch_move_rate += (diff - exposed.touch_move_rate)*0.01;
    exposed.touch_move_changedTouches_count = evt.changedTouches.length;
    exposed.touch_move_targetTouches_count = evt.targetTouches.length;

当我四处移动手指时，我将它移动成一个圆圈而不是之字形，因为在之字形点它可以触发比采样率更少的事件。由于收敛速度低（这是为了产生不会持续波动的数字），持续摩擦大约需要 5 秒才能使读数稳定在采样率上。

iOS6.0：

将两根手指放在一个元素中并移动一根手指：
changedTouches大小：1（移动的那个）
targetTouches大小：2（两个手指在元素上）
采样率：16.66ms

将两根手指放在一个元素中并左右移动：
changedTouches大小：2（都在移动）
targetTouches大小：2（元素上的两个手指）
采样率：16.66ms

在每个元素中放下一根手指并移动一根手指：
changedTouches大小：1（移动的那个）
targetTouches大小：1（指的是移动的那个最初触摸的元素）
采样率：16.66ms

在每个元素中放下一根手指并左右移动两根手指：
changedTouches大小：1（移动的那个）
targetTouches大小：1（指移动的那个最初触摸的元素）
采样率：8.29ms

在第一个元素中放下一根手指，在第二个元素中放下两个手指：
如果在第二个元素中移动一根手指
changedTouches大小：1
targetTouches大小：2
采样率：16.66ms

如果在第二个元素中移动两个手指
changedTouches大小：2
targetTouches大小：2
采样率：16.6 毫秒（真的很难保持第一根手指不动）

如果在第一个元素中移动手指
changedTouches大小：1
targetTouches大小：1
采样率：16.66ms

如果在第一个元素中移动手指，在第二个元素中移动一个手指
changedTouches大小：1
targetTouches大小：在 1 和 2 之间波动
采样率：8.29ms

如果移动所有三个手指
changedTouches大小：在 1 和 2 之间波动
targetTouches大小：2 采样率：约 8.3 毫秒

在每个元素中放下两根手指，在每个元素中左右移动一根手指：
changedTouches尺寸：1
targetTouches尺寸：2
采样率：约 9ms

很明显，在采样率为 ~120Hz 的所有情况下，我至少有两个元素在其中移动，这显然表明它将touchmove为每个同时触摸的元素触发一个单独的元素。我敢打赌，将测试扩展到 3 个元素会看到 180Hz 的采样率。更新：我在 iPad 上测试了 3 个元素，它确实产生了 5.4 毫秒的读数。

我有点好奇的是为什么我总是得到 8.29ms 而不是 8.33ms。9ms 的读数可能只是因为它的处理量比全速处理的多（因为我已经让 DOM 更新每一帧）

另一个更新：

在 Nexus 7 上的 Chrome 上，changedTouches缓冲区似乎总是充满了所有的触摸，因为webkitForce每次触摸的读数总是在变化。它也很慢，以至于采样率读数给出的有用信息为零。但是通过更改页面上最后一个有序元素中存在的手指数量，似乎touchmove事件也正确地在每个元素的基础上被触发。

Nexus 7 上的 Firefox 在产生合理的采样率读数方面要好一些，但显示的更新比 Chrome 还要慢。在 Firefox 变得不那么不稳定之前，我认为让代码在其上正常工作是不值得的。

于 2013-01-05T22:07:41.663 回答