HTML DOM TouchEvent অবজেক্ট

HTML DOM TouchEvent অবজেক্ট একটি ইভেন্টকে প্রতিনিধিত্ব করে যা টাচ ডিভাইস ব্যবহার করে HTML ডকুমেন্ট এলিমেন্টের সাথে ইন্টারঅ্যাকশনের সময় ঘটে।

এখানে "TouchEvent" নিম্নলিখিত প্রপার্টি এবং মেথড গুলো 가질 수 있습니다:

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

উদাহরণ: TouchEvent ctrlKey প্রপার্টি

<!DOCTYPE html> <html> <head> <title>HTML DOM TouchEvent ctrlKey</title> <style>    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    }    legend{       border-color: #dc3545;    }    span {       display: inline-block;       width: 40px;       height: 20px;       margin: 1px;       color: #fff;       border: 3px solid black;    }    div span:nth-child(1){       background-color: #FF8A00;    }    div span:nth-child(2){       background-color: #F44336;    }    div span:nth-child(3){       background-color: #03A9F4;    }    div span:nth-child(4){       background-color: #4CAF50;    } </style> </head> <body>    <form id="formSelect" ontouchstart="eventAction(event)">          <fieldset>          <legend>HTML-DOM-TouchEvent-ctrlKey</legend>          <label for="textSelect">Background Color Changer</label>          <div><span>alt</span><span>Ctrl</span><span>Meta</span><span>Shift</span></div>          <div id="divDisplay">No HotKey Pressed</div>       </fieldset>    </form> <script>    var divDisplay = document.getElementById("divDisplay");    var formSelect = document.getElementById("formSelect");    function eventAction(event) {       if(event.ctrlKey){          formSelect.style.backgroundColor = '#F44336';          formSelect.style.color = '#FFF'          divDisplay.textContent = 'ctrl Key Pressed';       }    } </script> </body> </html>

আউটপুট

টাচ ইভেন্ট ট্রিগার হওয়ার আগে:

টাচ ইভেন্ট Alt কী প্রেস করে ট্রিগার হওয়ার পর:

এছাড়া "TouchEvent" নিম্নলিখিত ইভেন্ট টাইপ গুলো ও 가질 수 있습니다:

উদাহরণ: ontouchend ইভেন্ট

<!DOCTYPE html> <html> <head> <title>HTML DOM touchend 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-touchend-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' বাটন টাচ করার আগে:

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