Mastering Touch Events in JavaScript: Techniques and Best Practices

Touch events are a type of event that can be triggered on touch-enabled devices, such as smartphones and tablets, using JavaScript. They allow web developers to respond to user interactions, such as tapping, swiping, and pinching, on touchscreens.

There are several touch events available in JavaScript, including:

touchstart: This event is triggered when a finger or stylus is first placed on the touch screen.
touchmove: This event is triggered when a finger or stylus is moved across the touch screen.
touchend: This event is triggered when a finger or stylus is lifted off the touch screen.
touchcancel: This event is triggered if the touch event is cancelled, such as when the touch is interrupted by an incoming call or other system event.

Each touch event provides information about the touch point, including the position (in pixels) relative to the viewport, the target element being touched, and other details such as the number of touches and their identifiers.

To handle touch events in JavaScript, you can use event listeners that are attached to the DOM elements you want to capture touch events from. For example, you can use the addEventListener method to listen for touch events on an element, and then use event handlers to execute custom code when touch events occur.

Here's an example of how you can use JavaScript to handle a touch event:

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/ico" href="logo.png" />
    <title>Document</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Lobster&family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }
      h3 {
        font-weight: 600;
        text-transform: uppercase;
      }
      #touchArea {
        width: 400px;
        height: 200px;
        background-color: gray;
        text-align: center;
        color: white;
        line-height: 200px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h3>Touch Events in JavaScript</h3>
    <div id="touchArea">Touch me!</div>

    <script src="touch.js"></script>
  </body>
</html>

script.js

/*
  4.Touch
    touchstart
    touchmove
    touchend
    touchcancel
*/

const touchArea = document.getElementById("touchArea");

touchArea.addEventListener("touchstart", function (e) {
  e.preventDefault();
  touchArea.style.backgroundColor = "blue";
  touchArea.textContent = "Touch Started !";
});

touchArea.addEventListener("touchmove", function (e) {
  e.preventDefault();
  touchArea.style.backgroundColor = "green";
  touchArea.textContent = "Touch Moved !";
});

touchArea.addEventListener("touchend", function (e) {
  e.preventDefault();
  touchArea.style.backgroundColor = "gray";
  touchArea.textContent = "Touch Ended !";
});

touchArea.addEventListener("touchcancel", function (e) {
  e.preventDefault();
  touchArea.style.backgroundColor = "red";
  touchArea.textContent = "Touch Cancelled !";
});

Live Preview

The provided code sets up event listeners for touch events on an element with the id "touchArea" using JavaScript. Let's go through each event listener and what it does:

touchstart: This event listener is triggered when a finger or stylus is first placed on the touch screen. It prevents the default behavior of the touchstart event using e.preventDefault(), which can prevent unintended actions such as scrolling. It then sets the background color of the "touchArea" element to blue and updates its text content to "Touch Started !".
touchmove: This event listener is triggered when a finger or stylus is moved across the touch screen. It also prevents the default behavior of the touchmove event using e.preventDefault(). It sets the background color of the "touchArea" element to green and updates its text content to "Touch Moved !".
touchend: This event listener is triggered when a finger or stylus is lifted off the touch screen. It prevents the default behavior of the touchend event using e.preventDefault(). It sets the background color of the "touchArea" element to gray and updates its text content to "Touch Ended !".
touchcancel: This event listener is triggered if the touch event is cancelled, such as when the touch is interrupted by an incoming call or other system event. It prevents the default behavior of the touchcancel event using e.preventDefault(). It sets the background color of the "touchArea" element to red and updates its text content to "Touch Cancelled !".

Note that in each event listener, the e parameter represents the touch event object, which contains information about the touch event, such as the target element, touch coordinates, and other details. By using event listeners for touch events, you can respond to user interactions on touch-enabled devices and customize the behavior of your web application accordingly.

It's important to note that touch events are different from mouse events, and may require additional considerations for handling gestures, multi-touch interactions, and performance optimization on touch-enabled devices. Proper handling of touch events can greatly enhance the user experience of a touch-enabled web application.

Mastering Touch Events in JavaScript: Techniques and Best Practices

List of Programs

JS Practical Questions & Answers

JS Practical Project

JS Membership Project