targetTouches跟踪触摸在多个元素上同时移动吗？ [英] Does targetTouches track touches moving simultaneously on multiple elements?
问题描述
假设我然后移动手指1和手指3.
我应该看一个 touchmove 事件，它将包含 changedTouches 包含手指1和3.
然而， targetTouches ？它会包含1和2，或3和4，或全部4？
似乎是提供足够的信息的唯一方式是1和2在同一个元素上，3和4都在不同的元素上是发送两个 touchmove 事件。
我正在建立一个触摸框架，我一直在构建一个跟踪所有手指和目标的全局数据结构，所以我知道发生了什么，但我想知道是否如果 targetTouches 事件可以提供所有必要的信息，可以完全跳过这个。
我测试了在我的网页上使用 touchstart
document.touchstart = function（evt）{console.log（touchstart ，evt.targetTouches）; }
我按照上面描述的顺序放下四根手指。接下来，我将尝试看看是否可以在 touchmove 中找到目标包含的内容，这是一个更困难的任务，因为它产生了多少数据。
我将在iOS6.0（iPhone 5），iOS5.1.1（iPad 3），Nexus 7上发布我的发现Android 4.2.1（Chrome 18.0.1025469）和Nexus 7上的Android 17 Firefox。
目前只有来自iPhone 5的数据。这是很多工作。
我所做的是在页面和 touchstart中进行两个元素调用 preventDefault （）以防滚动。然后我有 touchmove 计算其 changedTouches 和 targetTouches 缓冲区并显示在DOM中。此外，我计算了事件进入的速度。以下是代码段：
//暴露是一个变量其他代码使用rAF来呈现DOM的表示，所以我可以查看它
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 size：1（移动的一个）
targetTouches size：2（元素上的两个手指）
采样率：16.66ms
放下两根手指在一个元素中移动：
changedTouches size：2（both are moving）
targetTouches size：2（元素上的两根手指）
采样率：16.66ms
在每个元素中放一根手指，然后移动一根手指：
changedTouches size：1（移动的一个）
targetTouches size：1（指由移动的元素最初触摸的元素）
采样率：16.66ms
在每个元素中放下一根手指并移动两根手指：
changedTouches 大小：1（移动的）
targetTouches size：1（指由移动最初触摸的元素）
采样率：8.29ms
将第一个元素中的一个手指放在第二个元素中的两个手指：
如果在第二个元素中移动一个手指
changedTouches size：1
targetTouches size：2
采样率：16.66ms
如果在第二个元素中移动两个手指
changedTouches size：2
targetTouches size ：2
采样率：16.6ms（真的很难保持第一根手指不动）
如果在第一个元素
changedTouches size：1
targetTouches 大小：1
采样率：16.66ms
如果在第一个元素中移动手指，并在第二个元素中移动一个手指
ch angedTouches size：1
targetTouches size：波动在1和2之间
采样率：8.29
如果移动所有三根手指
changedTouches size ：在1和2之间波动
targetTouches size：2
采样率：约8.3ms
在每个元素中放下两根手指，并在每个元素中移动一个元素：
changedTouches size： 1
targetTouches size：2
采样率：约9ms
很清楚，所有采样率为120Hz的情况我至少有两个手指移动的元素，这似乎表明它将会单独触发 touchmove 为每个同时触摸的元素。我敢打赌将测试扩展到3个元素可以看到采样率为180Hz。更新：我测试了iPad上的3个元素，它的读取次数为5.4ms。
对我来说有点好奇，为什么我总是得到8.29ms而不是8.33毫不犹豫。 9ms的读取可能只是因为它的处理速度比全速处理（因为我每个帧都有DOM更新）
另一个更新： p>
在Chrome上的Nexus 7上， changedTouches 缓冲区总是似乎被填满所有的触摸，因为 webkitForce 读取总是随着每一次触摸而变化。它也很慢，以至于采样率读数给出了零有用的信息。但是，通过更改页面上最后一个有序元素中存在的手指数，看起来， touchmove 事件也正是在每个元素的基础上触发。
Nexus 7上的Firefox在产生合理的采样率读数方面有所改善，但显示更新比Chrome更加缓慢。直到Firefox变得不那么波动，我不认为值得让代码正常工作。
Suppose I've got four fingers down: two fingers (1, 2) in element A and two (3, 4) in element B.
Suppose I then move finger 1 and finger 3.
I should be looking at a touchmove event which will contain changedTouches containing fingers 1 and 3.
However what will targetTouches contain? Will it contain 1 and 2, or 3 and 4, or all 4?
It seems like the only way to provide enough info about the fact that 1 and 2 are on the same element and 3 and 4 are both on a different element is to send two touchmove events.
I'm building a touch framework and I have been constructing a global datastructure that tracks all fingers and their targets so I do know what's going on but I was wondering if it was possible to skip doing this entirely if the targetTouches events could provide me all the information necessary.
I tested it with touchstart on my page:
document.touchstart = function(evt) { console.log("touchstart", evt.targetTouches); }
I put four fingers down in the order I described above. Next up I'll try to see if I can find out what targetTouches contains in touchmove which is a more difficult task because of how much data it generates.
I will post my findings on iOS6.0 (iPhone 5), iOS5.1.1 (iPad 3), Nexus 7 on Android 4.2.1 (Chrome 18.0.1025469), and Firefox for Android 17 on the Nexus 7 below.
Currently only have data from the iPhone 5. This is a lot of work.
What I did was make two elements in the page and in the touchstart call preventDefault() to prevent scroll. Then I had touchmove count the length of its changedTouches and targetTouches buffers and display that in the DOM. Furthermore, I counted the rate at which the events came in. Here's a snippet of the code:
// 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;
When I move my finger around, I move it in a circle rather than a zig-zag because at the zig-zag points it can fire fewer events than the sample rate. Due to the low rate of convergence (this is to produce numbers that don't keep fluctuating) it takes about 5 seconds of continued rubbing to get the reading to stabilize on the sample rate.
iOS6.0:
Put down two fingers in one element and move one finger around:
changedTouches size: 1 (the one that moves)
targetTouches size: 2 (the two fingers on the element)
sample rate: 16.66ms
Put down two fingers in one element and move both around:
changedTouches size: 2 (both are moving)
targetTouches size: 2 (the two fingers on the element)
sample rate: 16.66ms
Put down one finger in each element and move one finger around:
changedTouches size: 1 (the one that moves)
targetTouches size: 1 (refers to element initially touched by the one that moves)
sample rate: 16.66ms
Put down one finger in each element and move both fingers around:
changedTouches size: 1 (the one that moves)
targetTouches size: 1 (refers to element initially touched by the one moving)
sample rate: 8.29ms
Put down one finger in first element and two fingers in second element:
if moving one finger in the second element
changedTouches size: 1
targetTouches size: 2
sample rate: 16.66ms
if moving both fingers in the second element
changedTouches size: 2
targetTouches size: 2
sample rate: 16.6ms (really hard to keep the first finger not moving)
if moving the finger in the first element
changedTouches size: 1
targetTouches size: 1
sample rate: 16.66ms
if moving the finger in the first element and one finger in the second element
changedTouches size: 1
targetTouches size: fluctuates between 1 and 2
sample rate: 8.29ms
if moving all three fingers
changedTouches size: fluctuates between 1 and 2
targetTouches size: 2
sample rate: about 8.3ms
Put down two fingers in each element and move one in each element around:
changedTouches size: 1
targetTouches size: 2
sample rate: about 9ms
It's pretty clear that all cases where the sample rate is ~120Hz I had at least two elements that had fingers moving in it, which definitely seems to indicate that it will fire a separate touchmove for each simultaneously touched element. I would bet that extending the test to 3 elements would see sample rates of 180Hz. Update: I tested 3 elements on the iPad and it does produce a 5.4ms reading.
What is a little curious to me is why I always get 8.29ms rather than 8.33ms exactly. The 9ms reading is probably just because it is more processing than it can handle at full speed (since I've got the DOM updating every frame)
Another Update:
On Chrome on the Nexus 7 the changedTouches buffer always seems to be filled with all the touches because the webkitForce reading is always changing for every single touch all the time. It is also so slow that the sample rate reading gives zero useful information. But by changing the number of fingers present in the last ordered element on the page it appears that the touchmove events are also correctly being fired on a per-element basis.
Firefox on Nexus 7 is a bit better at producing reasonable sample rate readings but the updating of the display is even more sluggish than Chrome. Until Firefox becomes less choppy I don't consider it worth the effort of getting code working correctly on it.
这篇关于targetTouches跟踪触摸在多个元素上同时移动吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
