Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

This is a draft

Touch Screen/ Gestures are the most popularly used technology to make user experience more smart and simple. Touch pads/screens make gaming more interactive and fun, and are being used widely all over the globe.

Touch methods

These methods allow for touch control  of a device: 

  • finger
  • stylus

Touch devices

These devices often have touch control capabilities:

  • smartphones
  • tablets
  • TVs with a touch screen
  • smart watches
  • touch pads on laptops
  • digital drawing boards
  • electronic signature pads

Touch gestures

Every gesture listed below can be performed from 1 to potentially 10 fingers.

For each gesture, a JS Fiddle code example is provided.

Tap

 

Briefly touch surface with fingertip

 

 

Purposes/real world use cases:

  • primary action
  • selecting
  • submitting
  • option menu: in touchpads using 2 fingers

Demo:

Double tap

 

 

Rapidly touch surface twice with fingertip

 

 

Purposes/real world use cases:

  • to unlock the phone (Windows phone)
  • to double jump in games
  • to zoom in/out

Press/Hold

 

 

Touch surface for extended period of time

 

 

 

Purposes/real world use cases:

  • to learn or get info about an item
  • to select and then drag or move (app icons)

Slide

Brush surface with fingertip from one side to another of the device.

Purposes/real world use cases:

  • go to next/prev page/slide
  • in touchpads: in Macs, you can switch desktops sliding with 4 fingers
  • in touchpads: navigate throught browser history using 2 fingers

Flick

Quickly brush surface with fingertip

Purposes/real world use cases:

  • yes/no or like/dislike, depending on the direction
  • in touchpads (on Macs, switch desktops by flicking with 4 fingers)
  • in games (like to throw ninja stars)
  • to create a different animation, compared to slide

Drag

Move finger over surface without losing contact.

Purposes/real world use cases:

  • move icons
  • perform actions
  • make a choice

Swipe

Brush surface with fingertip

Purposes/real world use cases:

  • to select
  • from edge, for system/app commands

Pan

Press and hold, then drag the finger in any direction

Purposes/real world use cases:

  • in games (to select and use items against a character, in addition to a "drag" gesture)
  • to view an expanded area on screen (for example, view the playing field in Angry Birds)

Rotate

Brush surface following a circle with 1 finger

Purposes/real world use cases:

  • make a choice following a graphic element

Pinch

Touch surface with 2 fingers and bring them closer to each other

Purposes/real world use cases:

  • zoom out

Spread/Stretch

Touch surface with 2 fingers and move them apart

Purposes/real world use cases:

  • zoom in

Press and tap

Press surface with one finger and briefly touch surface with second finger

Purposes/real world use cases:

  • in games

Press and drag

Press surface with one finger and move second finger over surface without losing contact.

Purposes/real world use cases:

  • in games 

Rotate

Touch surface with 2 fingers and move them in a clockwise or counterclockwise direction

Purposes/real world use cases:

  • select a function on smart watches

Touch Events

Touch Events: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events

touchstart

touchend

touchmove

touchcancel

 

Touch action

touch-action CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

The touch-action CSS property is part of the Pointer Events W3C specification: https://www.w3.org/TR/pointerevents/#the-touch-action-css-property

Github repository

Live demo

Document Tags and Contributors

 Last updated by: chrisdavidmills,