Explain touch events in JavaScript

JavascriptWeb DevelopmentObject Oriented Programming

The touch events in JavaScript are fired when a user interacts with a touchscreen device.

Following are the pointer event properties

touchstart.It is fired when the touch point is placed on the touch surface.
touchmoveIt is fired when the touch point is moved along the touch surface.
touchendIt is fired when the touch point is removed from the touch surface.
touchcancelIt is fired when the touch point has been disrupted

Following is the code for touch events in JavaScript −


 Live Demo

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   .sample {
      font-size: 18px;
      color: blueviolet;
      font-weight: 500;
   .sample {
      color: red;
<h1>Touch events in JavaScript</h1>
<div class="sample">Here is some sample text to touch</div>
<div class="result"></div>
<h3>Touch on the above paragraph to make output in the below paragraph visible</h3>
   let resEle = document.querySelector(".result");
   let sampleEle = document.querySelector(".sample");
   sampleEle.addEventListener("touchstart", () => {
      resEle.innerHTML = "Touch start event has been triggered";

The above code will produce the following output −


On touching the paragraph −

Updated on 16-Jul-2020 13:16:23