Skip to main content

@rtorcato/browser-common / touchevents

touchevents

Interfaces​

TouchPoint​

Defined in: touchevents/index.ts:46

A simple {x, y} pair extracted from a Touch.

Properties​

x​

x: number

Defined in: touchevents/index.ts:47

y​

y: number

Defined in: touchevents/index.ts:48

Type Aliases​

TouchEventType​

TouchEventType = "touchstart" | "touchmove" | "touchend" | "touchcancel"

Defined in: touchevents/index.ts:16

Touch event types that can be subscribed to via onTouch.

Functions​

isTouchEventsAvailable()​

isTouchEventsAvailable(): boolean

Defined in: touchevents/index.ts:9

Checks if the Touch Events API is available in the current environment.

Returns​

boolean

Example​

import { isTouchEventsAvailable } from '@rtorcato/browser-common/touchevents'
if (isTouchEventsAvailable()) enableTouchGestures()

onTouch()​

onTouch(element, type, handler, options?): () => void

Defined in: touchevents/index.ts:32

Attaches a touch event listener to an element and returns an unsubscribe function.

Parameters​

element​

Element | Window | Document

The element to listen on.

type​

TouchEventType

The touch event type.

handler​

(event) => void

The event handler.

options?​

AddEventListenerOptions

Optional addEventListener options. Pass { passive: false } if you need to call preventDefault().

Returns​

A function that removes the listener when called.

() => void

Example​

import { onTouch } from '@rtorcato/browser-common/touchevents'
const off = onTouch(slider, 'touchmove', (e) => updateSlider(e), { passive: true })
off()

getTouchPoints()​

getTouchPoints(event): TouchPoint[]

Defined in: touchevents/index.ts:65

Returns the client-coordinate points for every currently active touch on the event. Reads from event.touches — every contact still on the screen — not targetTouches or changedTouches.

Parameters​

event​

TouchEvent

The TouchEvent.

Returns​

TouchPoint[]

Example​

import { getTouchPoints } from '@rtorcato/browser-common/touchevents'
canvas.addEventListener('touchmove', (e) => {
  const points = getTouchPoints(e)
  points.forEach((p) => drawDot(p.x, p.y))
})

getTouchCount()​

getTouchCount(event): number

Defined in: touchevents/index.ts:87

Returns the number of currently active touches on the event. Reads from event.touches.length — every contact still on the screen — not targetTouches or changedTouches.

Parameters​

event​

TouchEvent

The TouchEvent.

Returns​

number

Example​

import { getTouchCount } from '@rtorcato/browser-common/touchevents'
canvas.addEventListener('touchstart', (e) => {
  if (getTouchCount(e) === 2) startPinch(e)
})