71

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?

Benjamin W.
  • 46,058
  • 19
  • 106
  • 116
Andrei Zisu
  • 4,292
  • 4
  • 21
  • 32

1 Answers1

237

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
Andrei Zisu
  • 4,292
  • 4
  • 21
  • 32
  • 4
    Could you clarify the node term? – Martin Oct 25 '12 at 17:51
  • 1
    Is this information accurate for all devices, i.e. Android and Safari environments? – David Apr 19 '13 at 12:22
  • It also seems like you can also get `e.touches` gets updated when you attach to `touchmove`, ie `e.touches[0].pageX` updates. Are there cases when this doesn't work? – Matt Jul 30 '13 at 22:20
  • They should probably be the same. I guess, with '''touchmove''', nit's the way '''changedTouches''' changes that varies. – Andrei Zisu Jul 31 '13 at 07:11
  • If you move a finger (thats already down) and place a finger (touchstart) at the same time, will both events be in changedTouches? – B T Aug 23 '13 at 15:51
  • I suppose the browser will fire two distinct events. That's what would make sense to me. – Andrei Zisu Aug 29 '13 at 14:11