HTML DOM touchstart Event

HTMLWeb DevelopmentFront End Technology

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 −


 Live Demo

<!DOCTYPE html>
<title>HTML DOM touchstart event</title>
   form {
      margin: 0 auto;
      text-align: center;
   * {
      padding: 2px;
   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;
         <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>
   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(){
   function victory(){
      divDisplay.textContent = "You Win"


Before touching the ‘Hold On’ button −

After touching the screen ‘Hold On’ button −

Updated on 08-Jul-2020 05:18:07