Sự kiện bắt đầu chạm HTML DOM được kích hoạt khi chạm vào màn hình cảm ứng.
LƯU Ý - Sự kiện này chỉ dành cho các thiết bị cảm ứng.
Cú pháp sau -
Kích hoạt sự kiện touchstart trong HTML -
ontouchstart = "eventFunction()"
Kích hoạt sự kiện touchstart trong JavaScript -
eventObject.ontouchstart = eventFunction
Lưu ý - Chúng tôi đã chạy các ví dụ về sự kiện Touch trên Trình chỉnh sửa HTML Trực tuyến được truy cập trên Điện thoại di động hoặc các hệ thống có quyền truy cập cảm ứng. Thao tác này được thực hiện để chúng ta có thể thực hiện các thao tác chạm như chạm vào màn hình trong 2 giây.
Hãy để chúng tôi xem ví dụ về sự kiện touchstart tài sản -
Ví dụ
<!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> Đầu ra
Trước khi chạm vào ‘Giữ lại’ nút -
Sau khi chạm vào màn hình ‘Giữ lại’ nút -
