Mobile Safari - “touchend” event not firing when last touch is removed?

Question

The \"gesture\" I\'m trying to capture is a tap when but only when an element (other or same) already has a touch on it. So, touch (1) presses the button down while touch (2

Answer 1

TouchEvent of the type touchend always have e.touches.length of 0

The missing last touchend event could be dependent on the targets of the touches. If both fingers lift at the same time AND both have the same target then only one touchend will fire, but it will have both touches in the e.changedTouches object. If the targets are different then you will see two touchend events, each with the associated touch in the changedTouches object.

Furthermore, and most puzzling, is that when you lift one of two fingers you will get the same behavior as if you had lifted both. Then when the remaining finger moves it will fire another touchstart, with that finger's original identifier in the touches. The result is that there is no way to tell at the time of the touchend which touch has ended until after an arbitrary amount of time (when the remaining finger moves).

To verify this you need to document the touchLists in each event. The only workaround I found is a cludge where I cache the touchstart events, setInterval for half a second, then hope that the remaining finger has fired a touchstart I can use to reconcile the state. Good Grief!

Answer 2

I can help you with one problem, but I don't know why the "touchend" isn't firing when both fingers leave the screen, when I run your code above, the "touchend" fires when either finger leaves the screen (on an iPhone 4)

1) While the "touchend" javascript event for iPhone does have the "touches" property, it's always going to be empty when the last finger leaves the screen, because "touches" for the iPhone represents fingers currently touching the screen, and "touchend" only fires after a finger leaves the screen. So on "touchend" "e.touches.length" will always be 0 when the last finger is lifted.

2) You can access which touches have changed in the "touchend" event by using the "changedTouches" property. This is problematic because it's behaviour is not very consistent.

If you touch the screen with one finger, then another, and then you remove one finger, a number of things could happen.

If you when you have removed the second finger, nothing has changed about the first finger, your event object in "touchend" will have "touches.length = 1" (the finger still on the screen) and "changedTouches.length = 1" (the finger that left the screen).

However, if you are moving the first finger (even a bit) when you remove the second finger, then on "touchend" your event object will have "touches.length = 1" (the finger still on the screen) and "changedTouches.length = 2" (the finger that left the screen + the movement of the first finger).

I found this article very helpful:

http://m14i.wordpress.com/2009/10/25/javascript-touch-and-gesture-events-iphone-and-android/