# TouchDevice

Class · extends [`EventHandler`](https://api.playcanvas.com/engine/classes/EventHandler.md) · category: Input

Source: https://github.com/playcanvas/engine/blob/dfcc50fbbfba2388843041a875ec0ef5d1a586c5/src/platform/input/touch-device.js#L17

Manages touch input by handling and dispatching touch events. Extends [EventHandler](https://api.playcanvas.com/engine/classes/EventHandler.md)
to fire `touchstart`, `touchend`, `touchmove`, and `touchcancel` events (see [TouchEvent](https://api.playcanvas.com/engine/classes/TouchEvent.md)).

Detects and processes touch interactions with the attached DOM element, allowing applications
to respond to common touch gestures. The TouchDevice instance must be attached to a DOM element
before it can detect touch events.

Your application's TouchDevice instance is managed and accessible via [AppBase#touch](https://api.playcanvas.com/engine/classes/AppBase.md#touch).

## Constructors

### constructor

```ts
new TouchDevice(element: Element)
```

Create a new touch device and attach it to an element.

**Parameters**

- `element` (`Element`): The element to attach listen for events on.

## Methods

### attach

```ts
attach(element: Element): void
```

Attach a device to an element in the DOM. If the device is already attached to an element
this method will detach it first.

**Parameters**

- `element` (`Element`): The element to attach to.

### detach

```ts
detach(): void
```

Detach a device from the element it is attached to.

## Events

### EVENT_TOUCHCANCEL

```ts
static EVENT_TOUCHCANCEL: string = 'touchcancel'
```

Fired when a touch is interrupted in some way. The exact reasons for canceling a touch can
vary from device to device. For example, a modal alert pops up during the interaction; the
touch point leaves the document area, or there are more touch points than the device
supports, in which case the earliest touch point is canceled. The handler is passed a
[TouchEvent](https://api.playcanvas.com/engine/classes/TouchEvent.md).

**Example**

```ts
app.touch.on('touchcancel', (e) => {
    console.log(`Touch canceled at position: ${e.x}, ${e.y}`);
});
```

### EVENT_TOUCHEND

```ts
static EVENT_TOUCHEND: string = 'touchend'
```

Fired when a touch ends. The handler is passed a [TouchEvent](https://api.playcanvas.com/engine/classes/TouchEvent.md).

**Example**

```ts
app.touch.on('touchend', (e) => {
    console.log(`Touch ended at position: ${e.x}, ${e.y}`);
});
```

### EVENT_TOUCHMOVE

```ts
static EVENT_TOUCHMOVE: string = 'touchmove'
```

Fired when a touch moves. The handler is passed a [TouchEvent](https://api.playcanvas.com/engine/classes/TouchEvent.md).

**Example**

```ts
app.touch.on('touchmove', (e) => {
    console.log(`Touch moved to position: ${e.x}, ${e.y}`);
});
```

### EVENT_TOUCHSTART

```ts
static EVENT_TOUCHSTART: string = 'touchstart'
```

Fired when a touch starts. The handler is passed a [TouchEvent](https://api.playcanvas.com/engine/classes/TouchEvent.md).

**Example**

```ts
app.touch.on('touchstart', (e) => {
    console.log(`Touch started at position: ${e.x}, ${e.y}`);
});
```

## Inherited from [EventHandler](https://api.playcanvas.com/engine/classes/EventHandler.md)

- `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler`
- `hasEvent(name: string): boolean`
- `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler`
- `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle`