touchstart

16 March, 2023

Contributors

Milsaware

@milsaware

About

The touchstart event is triggered when a user initiates a touch on a touch-enabled device. This event is similar to the mousedown event on desktop devices, but is specifically designed to handle touch input.

When a touchstart event is triggered, the browser creates a TouchEvent object that contains information about the touch, such as the coordinates of the touch point and the target element that received the touch. This information can be used by JavaScript code to respond to the touch, such as by initiating a drag-and-drop operation or displaying a context menu.

touchstart is just one of several touch events that are available in JavaScript, including touchmove, touchend, and touchcancel. These events can be used together to create complex touch-based interactions, such as pinch-to-zoom or swipe gestures.

Overall, the touchstart event is an important tool for developers who want to create touch-friendly applications that work well on both desktop and mobile devices. By responding to touch events, developers can create a more intuitive and engaging user experience for their users.

Event listener

Here's an example of how to use an event listener for the touchstart event:

HTML

<div id="my-element">Touch here</div>

JavaScript

// Get the element to add the event listener to
const myElement = document.getElementById('my-element');

// Add an event listener for touchstart
myElement.addEventListener('touchstart', (event) => {
    // Do something in response to the touchstart event
    console.log('Touch started at X: ' + event.touches[0].clientX + ', Y: ' + event.touches[0].clientY);
});

Here, we first use the document.getElementById method to get a reference to an HTML element with the ID "my-element". We then use the addEventListener method to add an event listener for the touchstart event to that element.

The second argument to the addEventListener method is a callback function that will be called when the touchstart event is triggered. In this case, we're logging the coordinates of the first touch point to the console, but you could do anything you want in response to the event.

Note that the event object passed to the callback function includes a touches property that contains an array of Touch objects, one for each touch point that was involved in the event. In this example, we're accessing the first touch point using event.touches[0] to get its clientX and clientY coordinates.

Property

Here's an example of how to use the ontouchstart property to add a touchstart event listener to an HTML element:

const myElement = document.getElementById('my-element');

// Add a touchstart event listener using the ontouchstart property
myElement.ontouchstart = function(event) {
    // Do something in response to the touchstart event
    console.log('Touch started at X: ' + event.touches[0].clientX + ', Y: ' + event.touches[0].clientY);
};

Here, we're using the document.getElementById method to get a reference to an HTML element with the ID "my-element". We then use the ontouchstart property to set a touchstart event listener on that element. The rest of the code executes the same as the example above.

Inline

Here's an example of how to use the ontouchstart inline attribute to add a touchstart event listener to an HTML element:

HTML

<div id="my-element" ontouchstart="handleTouchStart(event)">
    Touch me!
</div>

JavaScript

function handleTouchStart(event) {
    // Do something in response to the touchstart event
    console.log('Touch started at X: ' + event.touches[0].clientX + ', Y: ' + event.touches[0].clientY);
}

Here we're using the div element with the ID "my-element". We've added the ontouchstart attribute to the div, which sets the touchstart event listener inline.

The value of the ontouchstart attribute is a function name (handleTouchStart) that will be called when the touchstart event is triggered. In this case, we're logging the coordinates of the first touch point to the console, but you could do anything you want in response to the event.

Note that using inline attributes like this is generally not recommended for larger, more complex applications, as it can become difficult to manage and debug the code. It's better to use the addEventListener method or the on property to attach event listeners in a separate JavaScript file or script tag.

Programmatic trigger

There is no touchstart() method that can be used to programmatically trigger a touchstart event. However, you can use the dispatchEvent() method to create and dispatch a touchstart event programmatically:

const myElement = document.getElementById('my-element');

// Create a new touch event
const touchEvent = new TouchEvent('touchstart', {
    touches: [{ clientX: 100, clientY: 100 }]
});

// Dispatch the touchstart event to the element
myElement.dispatchEvent(touchEvent);

Here, we first use the document.getElementById method to get a reference to an HTML element with the ID "my-element".

We then create a new TouchEvent object using the TouchEvent() constructor. The first argument to the constructor is the name of the event to create (touchstart), and the second argument is an options object that can include additional properties such as touches and target.

We're using the touches property to specify the coordinates of the touch point that we want to simulate. In this case, we're creating a touch event with a single touch point at coordinates (100, 100).

Finally, we dispatch the touchstart event to the element using the dispatchEvent() method. This will trigger any event listeners that have been added to the element for the touchstart event.

javascript