Touch
touch event
HTML touch event attributes are used to handle interactions on touch-enabled devices, such as smartphones and tablets. These events are triggered when the user touches an element with their finger or stylus.
Touch Events in HTML
Touch events are used to handle interactions on touch-enabled devices, such as smartphones and tablets. They can be used to detect gestures, swipes, and other touch interactions.
| Event | Occurs When |
|---|---|
ontouchcancel | A touch event is interrupted, like when the touch is lost due to an external event (e.g., an incoming call). |
ontouchend | A finger is lifted off the touch screen. |
ontouchmove | A finger is moved or dragged across the touch screen. |
ontouchstart | A finger is placed on the touch screen, initiating the touch. |
These touch events are typically used in mobile web applications or responsive designs where touch-based interactions are essential. You can use them to implement touch-based features like swipe actions, pinch-to-zoom, or drag-and-drop. Let me know if you need help with code examples for any of these events!
TouchEvent Properties
These properties are part of the TouchEvent interface, providing detailed information about touch interactions on touch-enabled devices.
| Property | Returns |
|---|---|
altKey | true if the ALT key was pressed when the touch event occurred. |
changedTouches | A list of touch objects that have changed state between the current and previous touch events (e.g., new touch or end of touch). |
ctrlKey | true if the CTRL key was pressed when the touch event occurred. |
metaKey | true if the META (Command) key was pressed when the touch event occurred. |
shiftKey | true if the SHIFT key was pressed when the touch event occurred. |
targetTouches | A list of touch objects that are in contact with the surface, and the touch was initiated on the same target element as the current event target. |
touches | A list of touch objects currently in contact with the surface. This includes all active touches on the screen. |
These properties provide valuable information for building touch-based interfaces, such as gesture recognition, swiping, and other multi-touch features. You can access these properties in touch event handlers (e.g., ontouchstart, ontouchmove, ontouchend, etc.). Let me know if you need more details or examples!
Conclusion
Touch event attributes in HTML enable interactive, touch-based user experiences on mobile devices. They allow developers to handle gestures like tapping, swiping, and pinch-to-zoom effectively. By utilizing touch events and properties, developers can create responsive and engaging interfaces for mobile and tablet users.
ontoggle
The ontoggle event in HTML is triggered when a <details> element is opened or closed, allowing scripts to respond to changes in visibility.
ontouchcancel
The ontouchcancel event in HTML is triggered when a touch action is interrupted, enabling scripts to react to the cancellation of touch events.