কম্পিউটার টিউটোরিয়াল

HTML DOM touchstart ইভেন্ট

HTML DOM touchstart ইভেন্টটি ট্রিগার হয় যখন টাচ স্ক্রিন টাচ করা হয়।

নোট − এই ইভেন্ট শুধু টাচ ডিভাইসের জন্য।

সিনট্যাক্স

HTML-এ touchstart ইভেন্ট ট্রিগার:

ontouchstart = "eventFunction()"

জাভাস্ক্রিপ্টে touchstart ইভেন্ট ট্রিগার:

eventObject.ontouchstart = eventFunction

নোট − আমরা টাচ ইভেন্ট উদাহরণগুলো অনলাইন HTML এডিটরে মোবাইল বা টাচ-সক্ষম সিস্টেমে অ্যাক্সেস করে চালিয়েছি।

উদাহরণ

<!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>

আউটপুট

'Hold On' বাটন টাচ করার আগে:

HTML DOM touchstart ইভেন্ট

স্ক্রিনে 'Hold On' বাটন টাচ করার পর:

HTML DOM touchstart ইভেন্ট

  1. HTML DOM touchmove ইভেন্ট

  2. HTML DOM TouchEvent touches প্রপার্টি

  3. HTML DOM Ul অবজেক্ট

  4. HTML DOM Event type প্রপার্টি