HTML DOM touchstart Event

The HTML DOM touchstart event is triggered when touch screen is touched.

NOTE − This event is only for touch devices.

Following is the syntax −

Trigger touchstart event in HTML −

ontouchstart = "eventFunction()"

Trigger touchstart event in JavaScript −

eventObject.ontouchstart = eventFunction

Note − We ran Touch event examples on Online HTML Editors accessed on Mobile or systems with touch access. This is done so that we can perform touch operations like touch the screen for 2 seconds.

Let us see an example of touchstart event property −

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM touchstart event</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 50%;
      font-size: 20px;
      padding: 20px;
      border: 5px solid rgb(220, 53, 69);
      background: rgba(220, 53, 69, 0.5);
      color: #fefefe;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>HTML-DOM-touchstart-event</legend>
         <label for="textSelect">Game Time</label>
         <input type="button" id="gameSelect" value="Hold On">
         <div id="divDisplay">Hold On for 1 - sec to Win</div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var gameSelect = document.getElementById("gameSelect");
   var duration = 1000;
   var timer;
   gameSelect.ontouchstart = startEventAction;
   function startEventAction() {
      timer = setTimeout(victory, duration);
   }
   gameSelect.ontouchend = endEventAction;
   function endEventAction(){
      if(timer)
         clearTimeout(timer);
   }
   function victory(){
      divDisplay.textContent = "You Win"
   }
</script>
</body>
</html>

Output

Before touching the ‘Hold On’ button −

HTML DOM touchstart Event

After touching the screen ‘Hold On’ button −

HTML DOM touchstart Event