HTML DOM TouchEvent ऑब्जेक्ट

HTML DOM TouchEvent ऑब्जेक्ट एक इवेंट को दर्शाता है जो टच डिवाइसेज का उपयोग करके HTML डॉक्यूमेंट एलिमेंट्स के साथ इंटरैक्शन पर होता है।

गुण और विधियां

नोट: हमने टच इवेंट उदाहरणों को मोबाइल या टच एक्सेस वाले सिस्टम पर ऑनलाइन HTML एडिटर्स पर चलाया है।

उदाहरण (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 कुंजी दबाकर टच इवेंट ट्रिगर करने के बाद -

इवेंट प्रकार

उदाहरण (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' बटन को टच करने के बाद -