ontouchmove

The ontouchmove event in HTML is triggered when a touch point moves across the touch surface, enabling scripts to respond to the movement of the touch.

ontouchmove event

The ontouchmove event handler activates a script when a touch point moves across the touch surface. It is commonly used for tracking touch movements and implementing gesture-based controls on mobile devices.

Syntax

In HTML

index.html

<element ontouchmove="myScript">

In JS

script.js

object.ontouchmove = myScript;

In JavaScript, the `addEventListener()` function is used.

script.js

object.addEventListener("touchmove", myScript);

Example

::event-ontouchmove ::

index.html

<!DOCTYPE html>
<html>
<body>
<h1>DOM touchmove Event</h1>
<p ontouchmove="myFunction(event)">Touch this paragraph, and move the finger to trigger a function that will display the x and y coordinates of the touch, according the the document:</p>
<p><strong>Note:</strong> This example is for touch devices only.</p>
<p id="demo"></p>

<script>
function myFunction(event) {
  var x = event.touches[0].clientX;
  var y = event.touches[0].clientY;
  document.getElementById("demo").innerHTML = x + ", " + y;
}
</script>

</body>
</html>

Values

<script>
- Defines the <script> to run when the touch movement event is triggered.

Conclusion

The ontouchmove event in HTML triggers when a touch point moves across the touch surface. This event is useful for tracking and responding to touch movements, such as dragging or swiping, on touch-enabled devices. Developers can use this event to create interactive features like gesture controls or drawing applications by tracking the movement's coordinates as the user moves their finger or stylus.

ontouchend

The ontouchend event in HTML is triggered when a touch point is lifted from the touch surface, allowing scripts to respond to the completion of the gesture.

ontouchstart

The ontouchstart event in HTML is triggered when a touch point is placed on the touch surface, allowing interactive responses to touch interactions.