gpt4 book ai didi

javascript - targetTouches是否跟踪同时在多个元素上移动的触摸?

转载 作者:行者123 更新时间:2023-11-28 02:00:34 25 4
gpt4 key购买 nike

假设我有四个手指:元素A中有两个手指(1,2),元素B中有两个手指(3,4)。
假设我移动手指1和手指3。
我应该看一个包含手指1和3的touchmove事件。
但是changedTouches将包含什么?它会包含1和2,还是3和4,或者全部4?
对于1和2在同一个元素上,3和4都在不同的元素上这一事实,似乎提供足够信息的唯一方法是发送两个targetTouches事件。
我正在构建一个触摸框架,我一直在构建一个全局数据结构,跟踪所有手指及其目标,因此我知道发生了什么,但我想知道,如果touchmove事件能够提供所有必要的信息,是否可以完全跳过这一步。
我在页面上用targetTouches进行了测试:

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

我按上面描述的顺序放下四根手指。下一步,我将尝试查看是否可以找出 touchstart中的targetTouches包含什么,这是一个更困难的任务,因为它生成了多少数据。

最佳答案

下面我将在iOS6.0(iPhone 5)、iOS5.1.1(iPad 3)、Android 4.2.1上的Nexus 7(Chrome 18.0.1025469)和Nexus 7上发布我的发现。
目前只有iPhone5的数据。这是很多工作。
我做的是在页面和touchstart调用中创建两个元素来防止滚动。然后我让preventDefault()计算其touchmovechangedTouches缓冲区的长度,并将其显示在DOM中。此外,我还计算了事件发生的速度。下面是一段代码:

// 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标准:
将两个手指放在一个元素中,并移动一个手指:
targetTouches大小:1(移动的那个)
changedTouches大小:2(元素上的两个手指)
采样率:16.66ms
将两个手指放在一个元素中,然后左右移动:
targetTouches大小:2(都在移动)
changedTouches大小:2(元素上的两个手指)
采样率:16.66ms
在每个元素中放下一根手指,并移动一根手指:
targetTouches大小:1(移动的那个)
changedTouches大小:1(指最初由移动的元素接触的元素)
采样率:16.66ms
在每个元素中放下一个手指,并将两个手指四处移动:
targetTouches大小:1(移动的那个)
changedTouches大小:1(指最初被移动的元素接触的元素)
采样率:8.29ms
在第一个元素中放下一个手指,在第二个元素中放下两个手指:
如果在第二个元素中移动一个手指
targetTouches尺寸:1
changedTouches尺寸:2
采样率:16.66ms
如果在第二个元素中移动两个手指
targetTouches尺寸:2
changedTouches尺寸:2
采样率:16.6ms(真的很难让第一个手指不动)
如果在第一个元素中移动手指
targetTouches尺寸:1
changedTouches尺寸:1
采样率:16.66ms
如果移动第一个元素中的手指和第二个元素中的一个手指
targetTouches尺寸:1
changedTouches大小:在1和2之间波动
采样率:8.29ms
如果移动所有三个手指
targetTouches大小:在1和2之间波动
changedTouches尺寸:2
采样率:约8.3ms
在每个元素中放下两个手指,并在每个元素中移动一个手指:
targetTouches尺寸:1
changedTouches尺寸:2
采样率:约9ms
很明显,在所有采样率为~120Hz的情况下,我至少有两个元素的手指在其中移动,这显然表明它将为每个同时接触的元素发射一个单独的 targetTouches。我敢打赌,将测试扩展到3个元素将看到180Hz的采样率。更新:我在iPad上测试了3个元素,它确实产生了5.4ms的读数。
我有点好奇的是为什么我总是得到8.29毫秒而不是8.33毫秒。9ms的读取可能只是因为它的处理速度超过了它在全速下的处理速度(因为我已经让DOM更新了每一帧)
另一个更新:
在Nexus7的Chrome浏览器上, touchmove缓冲区似乎总是充满了所有的触摸,因为每次触摸的 changedTouches读数总是在变化。它也非常慢,以至于采样率读数没有提供有用的信息。但是,通过更改页面上最后一个有序元素中存在的手指数,似乎每个元素也正确地触发了 webkitForce事件。
Nexus 7上的Firefox在产生合理的采样率读数方面稍好一些,但显示更新甚至比Chrome更慢。在Firefox变得不那么起伏不定之前,我认为让代码在上面正常工作是不值得的。

关于javascript - targetTouches是否跟踪同时在多个元素上移动的触摸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14175789/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com