Các sự kiện cảm ứng trong JavaScript được kích hoạt khi người dùng tương tác với thiết bị màn hình cảm ứng.
Sau đây là các thuộc tính sự kiện con trỏ
| Sự kiện | Mô tả |
|---|---|
| touchstart. | Nó được kích hoạt khi điểm tiếp xúc được đặt trên bề mặt cảm ứng. |
| touchmove | Nó được kích hoạt khi điểm tiếp xúc được di chuyển dọc theo bề mặt cảm ứng. |
| touchhend | Nó được kích hoạt khi điểm tiếp xúc bị loại bỏ khỏi bề mặt cảm ứng. |
| touchcancel | Nó được kích hoạt khi điểm tiếp xúc bị gián đoạn |
Sau đây là mã cho các sự kiện chạm trong JavaScript -
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,
.sample {
font-size: 18px;
color: blueviolet;
font-weight: 500;
}
.sample {
color: red;
}
</style>
</head>
<body>
<h1>Touch events in JavaScript</h1>
<div class="sample">Here is some sample text to touch</div>
<div class="result"></div>
<h3>Touch on the above paragraph to make output in the below paragraph visible</h3>
<script>
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
sampleEle.addEventListener("touchstart", () => {
resEle.innerHTML = "Touch start event has been triggered";
});
</script>
</body>
</html> Đoạn mã trên sẽ tạo ra kết quả sau -
Đầu ra
Khi chạm vào đoạn văn -
