HTML DOM touchmove इवेंट तब ट्रिगर होता है जब टच टच स्क्रीन पर मूव होता है।
नोट: यह इवेंट केवल टच डिवाइसेज के लिए है।
सिंटैक्स
HTML में touchmove इवेंट ट्रिगर करना -
ontouchmove = "eventFunction()"
JavaScript में touchmove इवेंट ट्रिगर करना -
eventObject.ontouchmove = eventFunction
नोट: हमने टच इवेंट उदाहरणों को मोबाइल या टच एक्सेस वाले सिस्टम पर ऑनलाइन HTML एडिटर्स पर चलाया है।
उदाहरण
<!DOCTYPE html> <html> <head> <title>HTML DOM touchmove event</title> <style> * { padding: 2px; margin:5px; } form { width:70%; margin: 0 auto; text-align: center; } #outer { width:70%; margin: 0 auto; padding: 0; text-align: center; border:1px solid black; height: 105px; background-color: #28a745; } input[type="button"] { border-radius: 10px; } #upper { border-bottom: 1px solid black; height: 40px; margin: 0 0 15px 0; background-color: #DC3545; } #lower { border-top: 1px solid black; height: 40px; margin: 15px 0 0 0; background-color: #DC3545; } </style> </head> <body> <form> <fieldset> <legend>HTML DOM touchmove event</legend> <div id="outer"> <div id="upper"><h2>Danger</h2></div> <div id="lower"><h2>Danger</h2></div> </div> <input type="button" id="start" value="Start" onclick="gameStart()"> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById('divDisplay'); var gameDisplay = document.getElementById('outer'); function playGame(event) { var x = event.touches[0].clientX; var y = event.touches[0].clientY; if(y > 95 && y < 110){ divDisplay.textContent = 'Keep Going!'; if(x === 439){ divDisplay.textContent = 'Congrats! You Did it!'; gameDisplay.removeEventListener('touchmove', playGame); } } else{ divDisplay.textContent = 'You moved to DANGER area. You loose!'; gameDisplay.removeEventListener('touchmove', playGame); } } function gameStart(){ gameDisplay.addEventListener('touchmove',playGame); } </script> </body> </html>
आउटपुट
'Start' बटन पर क्लिक करने के बाद और कर्सर ग्रीन (सुरक्षित) क्षेत्र में -
'Start' बटन पर क्लिक करने के बाद और कर्सर ग्रीन (सुरक्षित) क्षेत्र के अंत में -
'Start' बटन पर क्लिक करने के बाद और कर्सर रेड (खतरे) क्षेत्र में -
