Đối tượng HTML DOM TouchEvent đại diện cho một sự kiện xảy ra khi tương tác với các phần tử tài liệu HTML bằng thiết bị cảm ứng.
Đây, “ TouchEvent” có thể có các thuộc tính và phương thức sau -
| Thuộc tính / Phương thức | Mô tả |
|---|---|
| altKey | Trả về giá trị Boolean tương ứng với trạng thái nếu phím alt được nhấn khi kích hoạt sự kiện atouch |
| changeTouches | Trả lại đối tượng aTouchList tương ứng với danh sách tất cả các điểm tiếp xúc được kích hoạt trên sự thay đổi trạng thái của các sự kiện chạm |
| ctrlKey | Trả về giá trị Boolean tương ứng với trạng thái nếu ctrl được nhấn khi kích hoạt công cụ cảm ứng |
| metaKey | Trả về giá trị Boolean tương ứng với trạng thái nếu meta được nhấn khi kích hoạt chương trình cảm ứng |
| shiftKey | Trả về giá trị Boolean tương ứng với trạng thái nếu phím shift được nhấn khi kích hoạt công cụ cảm ứng |
| targetTouches | Quay lại đối tượng TouchList tương ứng với danh sách tất cả các điểm tiếp xúc được kích hoạt trên bề mặt cảm ứng, Nếu một lần chạm được kích hoạt trên nút được chỉ định hoặc bất kỳ nút con nào của nó thì các lần chạm sau sẽ chỉ được tính nếu chúng cũng được kích hoạt trên cùng một nút |
| lần chạm | Trả về đối tượng aTouchList tương ứng với danh sách tất cả các điểm tiếp xúc được kích hoạt trên bề mặt cảm ứng, Nếu một lần chạm được kích hoạt trên nút đã chỉ định hoặc bất kỳ nút con nào của nó thì các lần chạm sau sẽ được tính ngay cả khi chúng không được kích hoạt trên cùng một nút |
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ề TouchEvent ctrlKey tài sản -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM TouchEvent ctrlKey</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
legend{
border-color: #dc3545;
}
span {
display: inline-block;
width: 40px;
height: 20px;
margin: 1px;
color: #fff;
border: 3px solid black;
}
div span:nth-child(1){
background-color: #FF8A00;
}
div span:nth-child(2){
background-color: #F44336;
}
div span:nth-child(3){
background-color: #03A9F4;
}
div span:nth-child(4){
background-color: #4CAF50;
}
</style>
</head>
<body>
<form id="formSelect" ontouchstart="eventAction(event)">
<fieldset>
<legend>HTML-DOM-TouchEvent-ctrlKey</legend>
<label for="textSelect">Background Color Changer</label>
<div><span>alt</span><span>Ctrl</span><span>Meta</span><span>Shift</span></div>
<div id="divDisplay">No HotKey Pressed</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var formSelect = document.getElementById("formSelect");
function eventAction(event) {
if(event.ctrlKey){
formSelect.style.backgroundColor = '#F44336';
formSelect.style.color = '#FFF'
divDisplay.textContent = 'ctrl Key Pressed';
}
}
</script>
</body>
</html> Đầu ra
Trước khi kích hoạt sự kiện chạm -
Sau khi kích hoạt chạm vào thậm chí t bằng phím thay thế được nhấn -
Ngoài ra, “ TouchEvent ”Có thể có các loại sự kiện sau -
| Sự kiện | Mô tả |
|---|---|
| ontouchcancel | Sự kiện Thetouchcancel được kích hoạt khi một hoặc nhiều sự kiện chạm bị gián đoạn |
| ontouchend | Sự kiện Thetouchend được kích hoạt khi loại bỏ cảm ứng khỏi màn hình cảm ứng |
| ontouchmove | Sự kiện Thetouchmove được kích hoạt khi di chuyển chạm trên màn hình cảm ứng |
| ontouchstart | Sự kiện Thetouchstart được kích hoạt khi chạm vào màn hình cảm ứng |
Hãy để chúng tôi xem ví dụ về sự kiện ontouchend tài sản -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM touchend 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-touchend-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 -
