เหตุการณ์ HTML DOM touchstart ถูกเรียกใช้เมื่อสัมผัสหน้าจอสัมผัส
หมายเหตุ − กิจกรรมนี้มีไว้สำหรับอุปกรณ์สัมผัสเท่านั้น
ต่อไปนี้คือรูปแบบ −
ทริกเกอร์เหตุการณ์ touchstart ใน HTML -
ontouchstart = "eventFunction()"
ทริกเกอร์เหตุการณ์ touchstart ใน JavaScript -
eventObject.ontouchstart = eventFunction
หมายเหตุ − เรารันตัวอย่างเหตุการณ์ Touch บนเครื่องมือแก้ไข HTML ออนไลน์ที่เข้าถึงบนมือถือหรือระบบที่มีการเข้าถึงแบบสัมผัส สิ่งนี้ทำเพื่อให้เราสามารถดำเนินการสัมผัสเช่นสัมผัสหน้าจอเป็นเวลา 2 วินาที
เรามาดูตัวอย่างของเหตุการณ์ touchstart ทรัพย์สิน −
ตัวอย่าง
<!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>
ผลลัพธ์
ก่อนแตะ 'เดี๋ยวก่อน' ปุ่ม −
หลังจากสัมผัสหน้าจอ 'เดี๋ยวก่อน' ปุ่ม −