# Touch/pointer tests and demos

Live versions of the various files at github.com/patrickhlauke/touch.

See the presentation Getting touchy - everything you (n)ever wanted to know about touch and pointer events for some context and further information on the meaning of these tests and demos.

## Tests

For a series of interesting results (different browsers, operating systems, assistive technologies), see my touch/pointer test results and, separately, `pointer`/`hover`/`any-pointer`/`any-hover` test results.

### Feature detection

- touch feature detect
- pointer/multitouch detect

### Event listener

- event listener - mouse only
- event listener - all events, no timings
- event listener - show delay
- event listener - show delay - no meta viewport
- event listener - all events, including timings (main test)
- event listener - no meta viewport
- event listener - link instead of button
- event listener - `div` instead of button
- event listener - `div` with `tabindex`
- event listener - shows `force` / `webkitForce` / `pressure`
- event listener - shows coordinates if present (to test VoiceOver, Opera SpatNav, etc behavior)
- event listener - including keyboard events
- event listener - including keyboard events on a text input

#### Touch or mouse

- event listener - naive "touch OR mouse" approach
- event listener - naive doubling of touch and mouse handlers
- event listener - double handlers, with `preventDefault`

#### Prevent default

- event listener - `preventDefault` all events
- event listener - `preventDefault` on `touchstart`
- event listener - `preventDefault` on `touchmove`
- event listener - `preventDefault` on `touchend`

#### 300ms `click` delay optimisations/heuristics

- event listener - `user-scalable=no`
- event listener - `minimum-scale=1,maximum-scale=1`
- event listener - `width=device-width`
- event listener - `touch-action:none`
- event listener - `touch-action:none` - no meta viewport
- event listener - `touch-action:manipulation`
- event listener - `touch-action:manipulation` - no meta viewport

### Touchlist objects

- touchlist objects

### touch/pointer and browser scroll/zoom

- gesture (e.g. scroll, pinch-zoom) and touch events (touch events spec grey area)
- gesture (e.g. scroll, pinch-zoom) and pointer events (not grey area - per spec `pointercancel` fires by default)

### iOS event bubbling

- iOS - Making Elements Clickable
- event bubbling - `button`
- event bubbling - link
- event bubbling - `div`
- event bubbling - `div` with `tabindex=0`
- event bubbling - `div` with `tabindex=0` and `role=button`
- event bubbling - `div` with `onclick` attribute
- event bubbling - `div` with `onclick` attribute on ancestor
- event bubbling - `div` with `addEventListener("click"...)`
- event bubbling - `div` with `addEventListener("click"...)` on ancestor
- event bubbling - `div` with `cursor:pointer`
- event bubbling - `div` with `cursor:pointer` on ancestor
- event listener - events fired at `<body>`
- event listener - events fired at `<body>` - with iOS clickability hacks
- event listener - events fired at `<html>`

### Implicit and explicit capture

- Implicit and explicit capture

### `touch-action`

- `touch-action` scrolling

### `pointerrawupdate`, `getCoalescedEvents()` and `getPredictedEvents()`

- basic drawing using `pointermove`
- basic drawing using `pointerrawupdate`
- basic drawing using `pointermove` and `getCoalescedEvents()`
- basic drawing with `getPredictedEvents()`
- combined `pointermove`, `getCoalescedEvents()`, and `getPredictedEvents()`

### Media Queries 4 Interaction Media Features

- CSS: `pointer` / `hover` / `any-pointer` / `any-hover`

### Touchscreen detection

- Touchscreen detection

## Demos

### 300ms `click` delay

- Tap delay example - Bootstrap navigation and 300ms delay
- Tap delay example - Bootstrap with `fastclick.js`

### `:hover` dropdown

- CSS dropdown
- CSS dropdown with JS keyboard support
- CSS dropdown with JS keyboard and touch support
- CSS dropdown with `aria-haspopup` for IE10+

### Particle party

- particle party - mouse only
- particle party - mouse only, but with `touch-action:none`
- particle party - mouse and touch
- particle party - mouse, touch and `touch-action:none`
- particle party - pointer events and `touch-action:none`

### Particle field

- particle field - mouse only
- particle field with touch
- particle field with touch and `touch-action:none`
- particle field with `pointermove`
- particle field with `pointermove` and `touch-action:none`
- particle field with `pointermove`, `touch-action:none` and `isPrimary` check

### Swipe gesture

- swipe gesture (from basic principles) with touch events
- swipe gesture (from basic principles) with pointer events
- swipe gesture (using `Hammer.js`)

### Picture slider/carousel

- picture slider

### Pull to refresh

- Pull to refresh (overscroll and touch events)

### Debounce/throttle

- debounce/throttle with limit.js

### Tracker

- tracker - mouse only
- tracker - mouse only, but with `touch-action:none`
- tracker - mouse and touch events
- tracker - mouse and touch events, `preventDefault` on gesture for iOS/iPad (spoiler: doesn't work)
- tracker - touch events only, showing `TouchList` index for each `Touch`
- tracker - mouse, touch and pointer events
- tracker - Touch Events `radiusX`, `radiusY`, `rotationAngle`
- tracker - Pointer Events `width`, `height`
- tracker - Touch Events `force`, Pointer Events `pressure`
- tracker - mouse and touch events, with HUD info for each point
- tracker - mouse, touch and pointer events, with HUD info for each point

### Pointer events advanced pen support

- Pointer Events - pen with tilt support (WebGL) - use `tiltX` / `tiltY`
- Pointer Events - pen with tilt support (WebGL) - use `altitudeAngle` / `azimuthAngle` (PE3)

### 3D jQuery Rotator

- 3D jQuery Rotator (original, only mouse events)
- 3D jQuery Rotator with Mouse and Pointer Events
- 3D jQuery Rotator with Pointer Events and PEP

### Polyfills

- event listener with HandJS
- event listener with PEP
- PEP Draw
- tracker - pointer events only
- tracker - pointer events only but with HandJS
- tracker - pointer events only but with PEP
- tracker - mouse, touch and pointer events, with HUD and PEP
- event listener with ie-touch

### Input detection

- What Input?
- What Input? + fastclick.js (test for compatibility)

### `click` as Pointer Event

- `click` showing `pointerType`

### Two-finger gestures (pinch/rotate)

- iOS gestures
- iOS gestures applied
- pinch/rotate gestures
- picture organiser

### LeapMotion

- tracker - LeapMotion (example of programmatically generating Pointer Events)

## 3rd party examples

- Paranoid 0.5 (original)
- CodePen collection: Basic slider
- Presentation: W3C Pointer Events Working Group update - changes and additions in Pointer Events Level 3 - Patrick H. Lauke / TPAC 2023