Course notes 36
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Touch Events

Touch and mouse events have a lot in common, but due to the more dynamic nature of touch interaction, touch events can prove more difficult to understand. At the initialization stage, the operable touch handlers should very similar:

  • touchstart → fires when a finger first comes into contact with the surface
  • touchmove → fires whenever a registered contact point moves on the surface
  • touchend → fires when a finger removes itself from contact with the surface

To frame it in terms of mouse events, a click would represent a touchstart followed by a touchend. The always useful mousemove could be simulated by tracking touchmove.

The Actual Event

The tricky part of touch events is dealing with the event object. When working with mouse events, you just have the simple event variable, usually referred to with e. However touch interaction is inherently more complex. Not only do we have to potentially deal with multiple points of contact, but at any time one of these points could be removed from the screen! The solution Apple and others arrived at is to separate the event's response data into three arrays.

  • e.touches[] → holds the data for all contacts on the screen.
  • e.targetTouches[] → holds the data for all contacts originating within the same target as the current event
  • e.changedTouches[] → holds only the data for contacts involved in the current event

Consider the following series of events :

  1. a finger is placed onto the screen
    • e.touches[0] = finger1
    • e.targetTouches[0] = finger1
    • e.changedTouches[0] = finger1

  2. a second finger is placed onto the screen, away from finger1
    • e.touches[0] = finger1
    • e.touches[1] = finger2
    • e.targetTouches[0] = finger2
    • e.changedTouches[0] = finger2

  3. the first finger is removed from the screen
    • e.touches[0] = finger2
    • e.targetTouches[] is empty (not confirmed)
    • e.changedTouches[0] = finger1

  4. a third finger is place in the same target as finger2
    • e.touches[0] = finger2
    • e.touches[1] = finger3
    • e.targetTouches[0] = finger2
    • e.targetTouches[1] = finger3
    • e.changedTouches[0] = finger3

  5. finger3 moves on the screen
    • e.touches[0] = finger2
    • e.touches[1] = finger3
    • e.targetTouches[0] = finger3
    • e.changedTouches[0] = finger3

  6. finger3 is removed from the screen
    • e.touches[0] = finger2
    • e.targetTouches[] is empty (not confirmed)
    • e.changedTouches[0] = finger3

  7. finger2 is removed from the screen
    • e.touches[0] is empty
    • e.targetTouches[] is empty
    • e.changedTouches[0] = finger2

Once you know where to look for the touch event's data, you can access it in the same way as mouse events. For example,to get the X and Y coordinates of the only finger on the screen, we could look up e.touches[0].pageX and e.touches[0].pageY.

As a proof of concept and reference, the following example will print out the lengths of the touch arrays following each interaction with the two boxes below.