반응형
#jQuery #touch #event #document #bind() #touchmove #touchstart #touchend
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>mobile.html</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<script src="/js/comm/jquery-1.11.1.js"></script>
<script>
$(document).ready(function() {
$(document).bind('touchstart', function(e) {
$("#msg").html("터치가 시작되었어요.");
e.preventDefault(); // 이벤트취소
});
$(document).bind('touchmove', function(e) {
// jQuery 이벤트 객체를 자바스크립트 표준 이벤트 객체로 바꾸기
// 이유는 jQuery 에서 자바 스크립트
var event = e.originalEvent;
$('#msg').html('touch 이벤트 중입니다.');
// div에 터치한 좌표값 넣기
$('#msg').append('<div>' + event.touches[0].screenX + ',' +
event.touches[0].screenY + '</div>');
event.preventDefault();
});
$(document).bind('touchend', function(e) {
$("#msg").append("<div>터치이벤트가 종료되었어요</div>");
});
});
</script>
</head>
<body>
<h2>모바일용 홈페이지 입니다.</h2>
<!--
스마트폰의 브라우저 : 마우스 이벤트와는 별도로 터치 이벤트를 지원함
touchstart : 터치가 시작될때
touchend : 터치가 종료될때
touchmove : 터치한 상태로 이동할때
touchenter : 터치한 요소의 경계외부에서 내부로 이동할때
touchleave : 터치한 요소의 경계내부에서 외부로 이동할때
-->
<div id="msg"></div>
</body>
</html>반응형
'프로그래밍 > Script' 카테고리의 다른 글
| [jQuery] AJAX Cross Origin plugin (0) | 2019.10.21 |
|---|---|
| javascript, nl2br, nl to (0) | 2019.09.11 |
| jQuery 화면전환 효과 참고 사이트 (0) | 2019.08.02 |
| [javascript] Switch case else (0) | 2019.07.31 |
| jsfiddle : kim hongwan's public fiddles, javascript (0) | 2019.06.13 |