HTML DOM TouchEvent 터치 속성은 터치 표면에서 트리거된 모든 접점 목록에 해당하는 TouchList 개체를 반환합니다.
참고:지정된 노드 또는 하위 노드에서 터치가 트리거되면 동일한 노드에서 트리거되지 않더라도 다음 터치가 계산됩니다.
다음은 구문입니다 -
TouchList 개체 반환
event.touches
참고:모바일 또는 터치 액세스가 가능한 시스템에서 액세스하는 온라인 HTML 편집기에서 터치 이벤트 예제를 실행했습니다. 화면을 2초 동안 터치하는 것과 같은 터치 작업을 수행할 수 있도록 하기 위한 것입니다.
TouchEvent 터치 의 예를 살펴보겠습니다. 속성 -
예시
<!DOCTYPE html>
<html>
<head>
<title>TouchEvent touches</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form id="formSelect" ontouchstart="startEventAction(event)" ontouchend="endEventAction(event)">
<fieldset>
<legend>TouchEvent-touches</legend>
<label for="textSelect">Game Players Selector</label>
<div id="divDisplay">All Players Place a Finger on Screen<br>Game Starting in 2 sec</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var gameSelect = document.getElementById("formSelect");
var duration = 2000;
var timer;
gameSelect.ontouchstart = startEventAction;
function startEventAction(event) {
timer = setTimeout(function(){
eventAction(event)
}, duration);
}
function endEventAction(event){
if(timer)
clearTimeout(timer);
eventAction(event);
}
function eventAction(event) {
var players = event.touches.length;
divDisplay.textContent = 'Total Players: '+players;
gameSelect.removeAttribute('ontouchstart');
gameSelect.removeAttribute('ontouchend');
}
</script>
</body>
</html> 출력
양식 요소를 만지기 전에 -
2초 동안 양식 요소를 터치한 후 -
