touchmove

16 March, 2023

Contributors

Milsaware

@milsaware

About

The touchmove event is a touch event that is fired when a touch point moves along the surface of a touch-enabled device, such as a mobile phone or tablet. It is typically used to track the movement of a user's finger or stylus across the screen, which can be useful for implementing touch-based interfaces or for performing touch-based interactions.

When the touchmove event is fired, it provides information about the touch point that has moved, including its current coordinates on the screen, its previous coordinates, and the amount of time that has elapsed since the previous event was fired. This information can be used to determine the speed and direction of the touch movement, as well as to update the display or perform other actions in response to the user's input.

The touchmove event is part of a larger set of touch events that are supported by modern browsers, including touchstart, touchend, touchcancel, and touchenter and touchleave. By combining these events, developers can create rich touch-based experiences that are tailored to the needs of their users.

Event listeners

Here's an example of using an event listener to listen for the touchmove event on a DOM element:

HTML

<div id="myElement">Touch and move here</div>

JavaScript

const element = document.getElementById("myElement");

element.addEventListener("touchmove", function(event) {
    // Do something when touchmove event is fired
});

Here, the touchmove event listener is attached to an HTML element with the id of "myElement". When the user moves their finger on the screen while touching this element, the touchmove event is fired, and the anonymous function specified as the event listener is executed. Within the function, you can write code to respond to the touchmove event in whatever way you desire.

Note that the touchmove event is not fired on every single pixel change while the user's finger is moving, but rather at an interval determined by the browser. Therefore, if you need to track every single pixel change, you will need to use more advanced techniques such as calculating the touch position using the touchstart and touchmove events together.

Property

Here is an example of using the ontouchmove property to attach a touchmove event listener to an element:

const element = document.getElementById('myElement');

element.ontouchmove = function(event) {
    console.log('Touch move detected!');
    // Do something in response to the touchmove event
};

Here, the ontouchmove property is set to a function that logs a message to the console when a touchmove event is detected on the myElement element. The event parameter is passed to the function, which can be used to access additional information about the touch event, such as the coordinates of the touch.

Inline

Here's an example of using the ontouchmove inline attribute to listen for the touchmove event on a div element:

HTML

<div ontouchmove="handleTouchMove(event)">Touch and move here</div>

JavaScript

function handleTouchMove(event) {
    console.log("Touch moved!");
    console.log("X position: " + event.touches[0].clientX);
    console.log("Y position: " + event.touches[0].clientY);
}

Here, the ontouchmove attribute is set to a function called handleTouchMove, which will be called every time the user moves their finger on the element.

The handleTouchMove function takes one parameter, which is the TouchEvent object. In this function, we're logging some information about the touch event, including the x and y position of the user's finger.

Note that using inline attributes like this is generally not recommended for larger, more complex applications, as it can become difficult to manage and debug the code. It's better to use the addEventListener method or the on property to attach event listeners in a separate JavaScript file or script tag.

Programmatic trigger

There is no touchmove() method to trigger touchmove programmatically, and it cannot be triggered using dispatchEvent(). The touchmove event is a browser event that is generated by user touch interactions on touch-enabled devices. It is typically used to track the movement of a user's finger on a touchscreen.

In order to simulate a touchmove event, you would need to manually create and dispatch a new touch event using the TouchEvent() constructor and then dispatching it using the dispatchEvent() method. However, this approach can be quite complex, as it requires you to specify all the relevant event properties, such as the touch point coordinates, touch force, and other touch properties:

const touchEvent = new TouchEvent('touchmove', {
    touches: [
        new Touch({
            identifier: Date.now(),
            target: document.body,
            clientX: 50,
            clientY: 50,
            pageX: 50,
            pageY: 50
        })
    ],
    targetTouches: [],
    changedTouches: [
        new Touch({
            identifier: Date.now(),
            target: document.body,
            clientX: 50,
            clientY: 50,
            pageX: 50,
            pageY: 50
        })
    ]
});

document.body.dispatchEvent(touchEvent);

This code creates a new TouchEvent object with the event type of touchmove and a single touch point located at the (50,50) position on the page. The identifier property of the touch is set to Date.now() to ensure it's unique, and the target property is set to document.body. The TouchEvent object is then dispatched to the document.body element using the dispatchEvent() method.

Note that this is just a basic example and that you may need to modify the touch event object to suit your specific use case. Additionally, please keep in mind that programmatically dispatching touch events can have unintended consequences and should be used with caution.

javascript