HTML ontouchstart Event Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. 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

<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>

Browser Support

The following table will show you the current browser support for the HTML ontouchstart Event Attribute.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 21st October 2023