HTML ontouchmove 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 ontouchmove HTML event attribute is used to specify a script to be executed when a user drags their finger across the touch screen while touching an element. It is a standard HTML event that is supported by all modern browsers.

The ontouchmove event is fired once for every movement of the finger, and it continues to fire until the finger is lifted from the touch screen. The event object provides information about the touch, such as the position of the finger, the identifier of the touch, and the number of fingers touching the screen.

The ontouchmove event can be used to create a variety of interactive elements, such as sliders, carousels, and drawing applications. For example, the following code snippet uses the ontouchmove event to update the position of a draggable element:

<div id="draggable" ontouchmove="updatePosition(event)">
  Drag me!
</div>

<script>
function updatePosition(event) {
  const element = document.getElementById("draggable");
  element.style.left = event.touches[0].clientX + "px";
  element.style.top = event.touches[0].clientY + "px";
}
</script>

In this example, the updatePosition() function is called whenever the user moves their finger while touching the draggable element. The function updates the position of the element based on the current position of the finger.

The ontouchmove event is a powerful tool that can be used to create engaging and interactive web pages. By using this event, developers can create elements that respond to user input in a natural and intuitive way.

Syntax

<element ontouchmove="script">

Values

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

Example

HTML

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

Result

Editor

Browser Support

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