Event

`TouchEvent`

Creates a new TouchEvent representing a touch interaction on a touch-sensitive surface

Syntax

JavaScript

new TouchEvent(type, options?)

Parameters

Parameter	Type	Description
type	string	The type of touch event (touchstart, touchmove, touchend, touchcancel)
options	TouchEventInit	Options including touches, targetTouches, changedTouches

Return Value

A new TouchEvent object

Examples

Basic Usage

const el = document.querySelector('.swipeable')!
el.addEventListener('touchstart', (e: TouchEvent) => {
  const touch = e.touches[0]
  console.log('Touch at:', touch.clientX, touch.clientY)
})

Practical Example

let startX = 0
const el = document.querySelector('.slider')!
el.addEventListener('touchstart', (e: TouchEvent) => {
  startX = e.touches[0].clientX
})
el.addEventListener('touchend', (e: TouchEvent) => {
  const endX = e.changedTouches[0].clientX
  const diff = endX - startX
  console.log(diff > 50 ? 'Swipe right' : diff < -50 ? 'Swipe left' : 'Tap')
})

Advanced Usage

function preventZoom(el: HTMLElement) {
  el.addEventListener('touchstart', (e: TouchEvent) => {
    if (e.touches.length > 1) e.preventDefault()
  }, { passive: false })
}

Understanding TouchEvent

The TouchEvent method in JavaScript creates a new TouchEvent representing a touch interaction on a touch-sensitive surface. It belongs to the Event object and is one of the most widely used methods for working with event values in modern JavaScript and TypeScript applications.

The method signature is new TouchEvent(type, options?). It accepts 2 parameters: type, options. When called, it returns a new touchevent object. Understanding when and how to use TouchEvent() helps you write more expressive, readable code.

Common use cases for TouchEvent include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like event-pointerevent, event-mouseevent, event-addeventlistener, enabling you to chain operations together for complex data manipulation pipelines.

Browser support for TouchEvent is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.