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

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

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result,
   .sample {
      font-size: 18px;
      color: blueviolet;
      font-weight: 500;
   }
   .sample {
      color: red;
   }
</style>
</head>
<body>
<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>
<script>
   let resEle = document.querySelector(".result");
   let sampleEle = document.querySelector(".sample");
   sampleEle.addEventListener("touchstart", () => {
      resEle.innerHTML = "Touch start event has been triggered";
   });
</script>
</body>
</html>

The above code will produce the following output −

Output

On touching the paragraph −


raja
Published on 16-Jul-2020 13:15:51
Advertisements