HTML ontouchstart Event Attribute
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 | |||||
Yes | Yes | Yes | Yes | Yes |
Tablets / Mobile | |||||
Yes | Yes | Yes | Yes | Yes | Yes |
Last updated by CSSPortal on: 21st October 2023