javascript - Variation of e.touches, e.targetTouches and e.changedTouches

Question

Let's say I am listening for touchstart, touchmove and touchend on the body element.

Let me know if I'm wrong, but I think e.touches is the same as e.targetTouches? If so, how e.changedTouches varies in relation with them?

I mean, given one touch at one given moment, I fetch the touchevent and parse it. In my experience all three touch variables are the same.

I have to send the parsed data to the server and it's quite redundant to send three times the same exact string, isn't there any way to send them once and programatically reproduce the touchevent on the server?

Answer 1

We have the following lists:

• touches: A list of information for every finger currently touching the screen
• targetTouches: Like touches, but is filtered to only the information for finger touches that started out within the same node
• changedTouches: A list of information for every finger involved in the event

To better understand what might be in these lists, let’s go over some examples quickly. They vary according to the following rules:

• When I put a finger down, all three lists will have the same information. It will be in changedTouches because putting the finger down is what caused the event
• When I put a second finger down, touches will have two items, one for each finger. targetTouches will have two items only if the finger was placed in the same node as the first finger. changedTouches will have the information related to the second finger, because it’s what caused the event
• If I put two fingers down at exactly the same time, it’s possible to have two items in changedTouches, one for each finger
• If I move my fingers, the only list that will change is changedTouches and will contain information related to as many fingers as have moved (at least one).
• When I lift a finger, it will be removed from touches, targetTouches and will appear in changedTouches since it’s what caused the event
• Removing my last finger will leave touches and targetTouches empty, and changedTouches will contain information for the last finger