크롬+ 자바스크립트로 터치이벤트 구현 후 크롬에서 아이패드 등의 기기에서 상태 확인하기
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>터치 이벤트</title>
<style type="text/css">
#box{
position: relativ;
width:200px; height:200px;
border:3px solid black;
}
</style>
</head>
<body>
<h1> 터치 이벤트</h1>
<div id="box">
<p>나를 터치해 주세요</p>
</div>
<script type="text/javascript">
var box = document.getElementById('box');
//터치 제어 객체 선언
var touch = {
start:function(){
box.innerHTML = '나를 건드렸군요';
this.style.background = "pink";
},
end:function(){
box.innerHTML = '손을 떼었군요';
this.style.background = "skyblue";
},
move:function(e){
box.innerHTML = '만지는 중입니다.';
this.style.background = "blue";
}
};
//터치 이벤트 리스너 추가
box.addEventListener('touchstart',touch.start);
box.addEventListener('touchend',touch.end);
box.addEventListener('touchmove',touch.move);
</script>
</body>
</html>
댓글