HTML ontouchstart Event Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The ontouchstart HTML event attribute is used to specify a script that is executed whenever a user touches an HTML element. This event is only supported on touch-enabled devices, such as smartphones and tablets.

When a user touches an element with the ontouchstart event attribute, the associated script is executed. The script can be used to perform a variety of tasks, such as:

Changing the element's appearance
Displaying a message
Navigating to a new page
Playing a sound

The ontouchstart event can be used to create a variety of interactive web experiences. For example, you could use it to create a button that changes color when it is touched, or a game that requires the user to tap on objects on the screen.

The ontouchstart event is a powerful tool that can be used to create engaging and interactive web pages.

Here is an example of how to use the ontouchstart event attribute:

<button ontouchstart="myFunction()">Touch me!</button>

function myFunction() {
  alert("You touched me!");
}

When the user touches the button, the myFunction() function is executed, and an alert message is displayed.

Syntax

<element ontouchstart="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<div id="touchable" style="width: 100px; height: 100px; background-color: lightblue;">

    Touch me!

</div>



<script>

const touchableElement = document.getElementById('touchable');



touchableElement.addEventListener('touchstart', function(event) {

    // This function will be called when a touchstart event occurs

    alert('Touch event started!');

});

</script>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML ontouchstart event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.