Sự kiện touchmove HTML DOM được kích hoạt khi di chuyển chạm trên 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.
Sau đây là cú pháp -
Kích hoạt sự kiện touchmove trong HTML -
ontouchmove = "eventFunction()"
Kích hoạt sự kiện touchmove trong JavaScript -
eventObject.ontouchmove = 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 touchmove tài sản -
Ví dụ
<!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> Đầu ra
Sau khi nhấp vào ‘ Bắt đầu’ nút và con trỏ trong vùng màu xanh lục (an toàn) -
Sau khi nhấp vào ‘Bắt đầu’ nút và con trỏ ở cuối vùng màu xanh lục (an toàn) -
Sau khi nhấp vào ‘Bắt đầu’ nút và con trỏ trong khu vực (nguy hiểm) màu đỏ -
