Mobile Web Wearable Web

Touch Events version 1

As there is no mouse in a mobile device, the user actions must be handled with touch events, instead of mouse events.

The main touch event features include:

  • Touch event types

    You can define event handlers for 4 different types of touch events:

    • touchstart handles an event which occurs when a finger comes in contact with the device screen.
    • touchmove handles an event which occurs when a finger moves while it is in contact with the screen.
    • touchend handles an event which occurs when a finger is removed from the screen.
    • touchcancel handles an event which occurs when a touch is cancelled.

    These events are similar to the mousedown, mousemove, and mouseup mouse events.

    Note
    In Tizen, the touchcancel event occurs when a context menu is activated by a long press of a DOM element, such as text or image.
  • Touch point coordinate

    When a touch event occurs, you can retrieve the coordinate of the event point occurrence. Because the finger, and consequently the contact area of the screen, is quite large, the retrieved coordinate is the average value of the contact area.

    Since a mobile device has no sub-devices to provide event inputs, you can use gesture events, such as the page turning effect or image drawing, based on the finger movement coordinates of the touchmove event.

  • Multi-point touch control

    Unlike with mouse events, multiple concurrent touch events (represented by the Touch interface) can occur. To control multi-point touch events, the TouchList interface is used to save the respective event status (based on the touches, targetTouches, and changedTouches attributes). The status stored in the TouchList instance is renewed every time a new touch event occurs.

A touch-based mobile operating system uses tap and double-tap gestures. The tap is used to generate a click event, and double-tap used for zooming. To recognize the touch gestures, the OS sets a timer which starts at the first tap and checks for a second before the event is fired. This causes a delay in the single tap event, making the touch responsiveness of the application suffer. To avoid the delay, you can enhance the touch event responsiveness by making the page unscalable, or modifying touch responses.

Go to top