HTML DOM touchcancel 이벤트란?
HTML DOM의 touchcancel 이벤트는 진행 중인 하나 이상의 터치 이벤트가 시스템에 의해 중단되었을 때 발생합니다. 예를 들어, 사용자가 화면을 터치하는 도중 전화가 걸려오거나 시스템 알림이 나타나는 등 터치 흐름이 방해받는 상황에서 이 이벤트가 트리거됩니다.
참고: 이 이벤트는 스마트폰, 태블릿과 같은 터치 지원 기기에서만 동작하며, 일반 데스크톱 환경에서는 작동하지 않습니다.
문법(Syntax)
HTML에서 touchcancel 이벤트를 트리거하는 방법은 다음과 같습니다.
ontouchcancel = "eventFunction()"
JavaScript에서 touchcancel 이벤트를 트리거하는 방법은 다음과 같습니다.
eventObject.ontouchcancel = eventFunction
예제
아래 예제는 입력 필드에 ontouchcancel 속성을 적용하여, 터치 이벤트가 중단되었을 때 결과 영역에 메시지를 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM touchcancel event</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>
<fieldset>
<legend>HTML-DOM-touchcancel-event</legend>
<label for="textSelect">Proverb --></label>
<input type="text" ontouchcancel="eventAction()" id="textSelect" size="30" value="Too many cooks spoil the broth" disabled>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function eventAction() {
divDisplay.textContent = 'Too many touch events triggered and disrupted';
}
</script>
</body>
</html>실행 결과
화면을 터치하기 전의 모습입니다.
화면에서 여러 터치 이벤트를 연속으로 발생시켜 중단된 후의 모습입니다.
