English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
모바일 개발에서는, 먼저 데스크톱에서 프로토타입 설계를 시작한 후, 지원할 장치에서 모바일 특유의 부분을 처리하는 것이 쉬운 방법입니다. 멀티터치는 대부분의 PC가 터치 입력을 가지지 않기 때문에 PC에서 테스트하기 어려운 기능 중 하나입니다.
모바일 장치에서 수행해야 할 테스트는 개발 주기를 늘릴 수 있습니다. 왜냐하면 여러분이 한 가지 변경 사항을 코드를 서버에 제출하고 장치에 다시 로드해야 하기 때문입니다. 그런 다음, 실행되면 애플리케이션에 대한 디버깅은 많지 않습니다. 왜냐하면 태블릿 컴퓨터와 스마트폰은 웹 개발자가 사용하는 도구가 부족하기 때문입니다.
이 문제의 하나의 해결책은 개발 기기에서 이벤트를 모의하는 것입니다. 단일 터치의 경우, 터치 이벤트는 마우스 이벤트를 기반으로 모의할 수 있습니다. 모터보드 터치 입력 장치가 있으면(예: 현대의 App MacBook), 멀티터치도 모의할 수 있습니다.
단일 터치 이벤트
만약 데스크톱에서 단일 터치 이벤트를 모의하고 싶다면 Phantom Limb을 시도해 보세요. 이 프로그램은 웹에서 터치 이벤트를 모의하고 거대한 손을 제공하여 안내합니다.
또한 Touchable 이라는 jQuery 플러그인도 있으며, 이 플러그인은 플랫폼 간에 터치와 마우스 이벤트를 일관되게 합니다.
멀티터치 이벤트
여러분의 멀티터치 웹 애플리케이션이 브라우저나 멀티터치 패드(예: Apple MacBook이나 MagicPad)에서 작동하도록 하기 위해, 제가 이 MagicTouch.js 패드 도구를 만들었습니다. 이 도구는 터치 패드에서 오는 터치 이벤트를 잡아서 표준 호환 터치 이벤트로 변환합니다.
1. npTuioClient NPAPI 플러그인을 다운로드하여 ~에 설치하십시오./Library/Internet Plug-Ins/디렉토리에 있습니다.
2. 이 Mac MagicPad의 TongSeng TUIO 애플리케이션을 다운로드하고 서버를 시작합니다.
3. MagicTouch.js 이라는 JavaScript 라이브러리를 다운로드하여 npTuioClient 콜백 스펙을 호환하는 터치 이벤트를 기반으로 합니다.
4. 이렇게 magictouch.js 스크립트와 npTuioClient 플러그인을 애플리케이션에 포함하십시오：
< head> ... < script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js">< /script> < /head> < body> ... < object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;"> Touch 입력 플러그인 로드 실패! < /object> < /body>
제가 사용한 것은 Chrome 10이 방법을 테스트했지만, 조금만 조정하면 다른 현대 브라우저에서도 작동할 수 있을 것입니다.
컴퓨터에 다점 터치 입력이 없다면, reacTIVision과 같은 다른 TUIO 추적기를 사용하여 터치 이벤트를 모의할 수 있습니다. 자세한 정보는 TUIO 프로젝트 페이지를 참조하세요.
반드시 고려해야 할 점은, 당신의 제스처가 OS 단위의 다점 터치 제스처와 동일할 수 있습니다. OS X에서는 System Preferences에서 Trackpad 선호 설정 탐색으로 시스템 전역 이벤트를 설정할 수 있습니다.
다점 터치 기능이 점점 더 많은 모바일 브라우저에서 지원되면서, 새로운 웹 애플리케이션이 이 풍부한 API를 최대한 활용하고 있다는 것을 보고 매우 기쁩니다.
原文来源：html5rocks.com
原标题：Developing for Multi-Touch 웹 브라우저
1. 휴대폰의 터치 이벤트
기본 이벤트:
touchstart //손가락이 화면에 닿을 때 발생
touchmove //손가락이 화면에서 움직이면 발생
touchend //손가락이 화면에서 벗어나면 발생
이것은 매우 덜 사용됩니다: touchcancel //터치 과정이 시스템에서 취소될 때 발생
모든 이벤트에 대한 다음과 같은 목록이 있습니다, 예를 들어 touchend의 targetTouches는 당연히 0입니다:
touches //화면에 위치한 모든 손가락의 목록
targetTouches //그 요소에 위치한 모든 손가락의 목록
changedTouches //현재 이벤트에 관여하는 모든 손가락의 목록
모든 이벤트에 대한 목록이 있습니다, 예를 들어 touchend의 targetTouches는 당연히 0입니다:
그 중에서 pageX, pageY가 일반적입니다：
pageX //페이지에 대한 X 좌표
pageY //페이지에 대한 Y 좌표
clientX //비율 영역에 대한 X 좌표
clientY //비율 영역에 대한 Y 좌표
screenX //화면에 대한 X 좌표
screenY //화면에 대한 Y 좌표
identifier // 현재 터치 포인트의 유일한 번호
target //터치한 DOM 요소
기타 관련 이벤트:
event.preventDefault（） //触摸 시 브라우저의 확대, 스크롤바 스크롤을 방지
var supportTouch = "createTouch" in document //터치 이벤트를 지원하는지 확인
2. 예제
다양한 유형의 스라이딩을 얻는 코드의 구체적인 방법은, 전인의 생각을 결합하여 패키지화하여, 참고 학습할 수 있습니다:}
var touchFunc = function(obj,type,func) {
//스ライ딩 범위는5x5내부에서 클릭 처리를 합니다, s는 시작, e는 종료
var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
var sTime = 0, eTime = 0;
type = type.toLowerCase();
obj.addEventListener("touchstart",function(){
sTime = new Date().getTime();
init.sx = event.targetTouches[0].pageX;
init.sy = event.targetTouches[0].pageY;
init.ex = init.sx;
init.ey = init.sy;
if(type.indexOf("start") != -1) func();
}, false);
obj.addEventListener("touchmove",function() {
event.preventDefault();//触摸 시 브라우저의 확대, 스크롤바 스크롤을 방지
init.ex = event.targetTouches[0].pageX;
init.ey = event.targetTouches[0].pageY;
if(type.indexOf("move") !=-1) func();
}, false);
obj.addEventListener("touchend",function() {
var changeX = init.sx - init.ex;
var changeY = init.sy - init.ey;
if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
//左右 이벤트
if(changeX > 0) {
if(type.indexOf("left") !=-1) func();
}else{}}
if(type.indexOf("right") !=-1) func();
}
}
else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
//상하 이벤트
if(changeY > 0) {
if(type.indexOf("top") !=-1) func();
}else{}}
if(type.indexOf("down")!=-1) func();
}
}
else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
eTime = new Date().getTime();
//클릭 이벤트, 이곳에서 시간 차이를 구분합니다
if((eTime - sTime) > 300) {
if(type.indexOf("long")!=-1) func(); //장기 누르기
}
else {
if(type.indexOf("click")!=-1) func(); //클릭 처리 시
}
}
if(type.indexOf("end")!=-1) func();
}, false);
};
재단된 글:모바일 터치 스크린의 JS 이벤트
Touch 이벤트를 처리하면 사용자의 각 손가락의 위치를 추적할 수 있습니다. 다음 네 가지 Touch 이벤트를 바인딩할 수 있습니다：
1.touchstart: // 손가락이 화면에 닿을 때 발생
2.touchmove: // 손가락이 화면에서 움직일 때 발생
3.touchend: // 손가락이 화면에서 들어올 때 발생
4touchcancel: // 시스템이 touch 이벤트를 취소할 때 발생. 시스템이 언제 취소할지는 알려지지 않음
속성
1.client / clientY：// 터치 포인트가 브라우저 창 viewport에 대한 위치
2.pageX / pageY：// 터치 포인트가 페이지에 대한 위치
3.screenX /screenY：// 터치 포인트가 화면에 대한 위치
4.identifier： // 터치 객체의 유일한 ID
//touchstart 이벤트
function touchSatrtFunc(e) {
//evt.preventDefault(); //터치 시 브라우저의 확대, 스크롤 바滚动 등을 방지
var touch = e.touches[0]; //첫 번째 터치 포인트 가져오기
var x = Number(touch.pageX); //화면 터치 포인트 X 좌표
var y = Number(touch.pageY); //화면 터치 포인트 Y 좌표
//터치 포인트 초기 위치 기록
startX = x;
startY = y;
}
//touchmove 이벤트
function touchMoveFunc(e) {
//evt.preventDefault(); //터치 시 브라우저의 확대, 스크롤 바滚动 등을 방지
var touch = evt.touches[0]; //첫 번째 터치 포인트 가져오기
var x = Number(touch.pageX); //화면 터치 포인트 X 좌표
var y = Number(touch.pageY); //화면 터치 포인트 Y 좌표
var text = 'TouchMove이벤트가 발생하면：（' + x + ', ' + y + ');
//判断滑动方向
if (x - startX != 0) {
//左右滑动
}
if (y - startY != 0) {
//上下滑动
}
}
转载的第二篇文章：Mobile Web前端开发系列: 事件处理（二）
이전 기사에서는 html 기본 이벤트에 대해 설명했습니다. 이 기사에서는 터치 이벤트를 중점적으로 설명하겠습니다. 터치 이벤트가 트리거되는 조건은 지문이 화면에 닿거나 화면에서 이동하거나 화면에서 벗어나는 것입니다. 이벤트는 터치의 집합으로, 지문이 첫 번째로 화면에 놓이기 시작하여 마지막 지문이 화면에서 벗어나기까지의 모든 터치 작업을 저장합니다. 이벤트의 시작부터 끝까지의 모든 터치 작업은 동일한 이벤트의 기록에 저장됩니다.
터치 이벤트
터치 이벤트는 단일 터치와 멀티 터치 두 가지로 나눌 수 있습니다. 단일 터치는 고급 모델에서 일반적으로 지원됩니다. Safari20, Android30 이상 버전에서 멀티 터치를 지원, 최대5개 지문이 동시에 화면을 터치할 때, iPad는 최대11개 지문이 동시에 화면을 터치할 때, 이러한 이벤트를 포착하기 위해 다음과 같은 이벤트 모델을 사용할 수 있습니다:
ontouchstart ontouchmove ontouchend ontouchcancel
사용자가 지문을 화면에 누르면 ontouchstart가 트리거됩니다. 사용자가 하나나 많은 지문을 이동시키면 ontouchmove가 트리거됩니다. 사용자가 지문을 벗어났을 때, ontouchend가 트리거됩니다. 그렇다면 언제 ontouchcancel이 트리거됩니까? 예를 들어, alert, 전화가 오거나 알림 메시지가 표시될 때 이전 touch 작업을 취소하면 현재 touch 작업이 취소되고 ontouchcancel이 트리거됩니다. 웹 게임을 개발할 때, ontouchcancel은 매우 중요합니다. ontouchcancel이 트리거될 때 게임을 일시 중지하거나 게임을 저장할 수 있습니다.
제스처 이벤트
제스처 이벤트의 작동 원리는 터치 이벤트와 동일하지만, 제스처 이벤트는 화면에 최소 두 지문이 있을 때만 트리거됩니다. 따라서 Safari20, Android30 이상 버전에서 지원, 제스처는 많은 장점을 가지고 있으며, 우리가 두 지문의 확대 및 회전 작업을 측정하는 데 도움이 됩니다. 이벤트 모델은 다음과 같습니다:
ongesturestart ongesturechange ongestureend
이벤트 속성
터치 또는 제스처 이벤트를 사용하든, 이 이벤트를 사용하기 위해 이를 단일 터치로 변환해야 합니다. 이를 위해, 이벤트 객체의 시리즈의 속성에 접근해야 합니다.
targetTouches 목표 요소의 모든 현재 터치 changedTouches 페이지에서 최신 변경된 모든 터치 touches 페이지에서 모든 터치
changedTouches, targetTouches 및 touches는 각각 조금 다른 터치 목록을 포함합니다. targetTouches와 touches는 현재 스크린에 있는 손가락 목록을 포함하지만, changedTouches는 최근 발생한 터치만 목록에 나타냅니다. touchend 또는 gestureend 이벤트를 사용할 때, 이 속성은 매우 중요합니다. 이 두 경우 모두 스크린에는 손가락이 더 이상 없기 때문에, targetTouches와 touches는 비어 있어야 합니다. 그러나 여전히 changedTouches 배열을 통해 최근 발생한 일을 이해할 수 있습니다.
터치 속성은 모두 배열을 생성하므로, JavaScript 배열 함수를 사용하여 접근할 수 있습니다. 이는 event.touches[0]가 첫 번째 터치를 반환하며, event.touches.length를 사용하여 현재 저장된 터치의 수를 계산할 수 있다는 것을 의미합니다.
단일 터치를 확인할 때, event.targetTouches[0]를 사용하여 다른 터치에도 접근할 수 있습니다. 각 터치는 일부 구체적인 정보를 포함합니다.
clientX, clientY는 현재 스크린의 X 또는 Y 위치에 대해, pageX, pageY는 전체 페이지의 X 또는 Y 위치에 대해, screenX, screenY는 사용자 컴퓨터 스크린의 X 또는 Y 위치에 대해, identifier는 이벤트의 유일한 식별자입니다. target은 터치의 목표 객체를 생성합니다
기울기 이벤트의 이벤트 객체는 일반 터치 이벤트보다 두 가지 추가 속성을 가집니다. rotation 손가락의 회전 각도, scale 확대 값
재단 문서:JavaScript 터치 및 기울기 이벤트
iOS 버전의 사파리는 개발자에게 특별한 정보를 전달하기 위해 몇 가지 독점 이벤트를 추가했습니다. iOS 기기는 마우스도 없고 키보드도 없기 때문에, 모바일 사파리를 통해 상호작용 웹 페이지를 개발할 때 일반 마우스와 키보드 이벤트는 절대로 부족합니다. 안드로이드의 WebKit이 추가되면서 많은 이러한 독점 이벤트가 실제 표준이 되었습니다.
1. 터치 이벤트
iOS 포함2.0 소프트웨어의 아이폰 3G 출시 시, 새로운 버전의 사파리 브라우저도 포함되었습니다. 이 새로운 모바일 사파리는 터치(터치) 작업과 관련된 몇 가지 새로운 이벤트를 제공합니다. 나중에는 안드로이드 브라우저도 같은 이벤트를 구현했습니다. 터치 이벤트는 사용자가 손가락을 스크린에 올릴 때, 스크린에서 슬라이딩할 때, 또는 스크린에서 벗어날 때 발생합니다. 구체적으로 다음과 같은 몇 가지 터치 이벤트가 있습니다.
터치스타트: 손가락이 스크린에 닿을 때 발생합니다; 이미 스크린에 손가락이 하나씩 있어도 발생합니다.
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。
上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件的event对象都提供了在鼠标事件中常见的属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。
除了常见的DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含下列属性。
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标。
使用这些属性可以跟踪用户对屏幕触摸操作。来看下面的例子。
function handleTouchEvent(event) {
//只跟踪一次触摸
if (event.touches.length == 1) {
var output = document.getElementById("output");
switch (event.type) {
case "touchstart":
output.innerHTML = "Touch started ( + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML +Touch ended ( + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); //스크롤 방지
output.innerHTML +="<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
}
}
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);
이 코드는 화면에서 발생하는 한 번의 터치 작업을 추적합니다. 간단을 위해 한 번의 활동적인 터치 작업이 있을 때만 정보를 출력합니다. touchstart 이벤트가 발생할 때, 터치 위치 정보를 다음에 출력합니다:
요소 내에서. touchmove 이벤트가 발생하면 기본 동작을 취소하고(터치 이동의 기본 동작은 페이지를 스크롤하는 것이며), 터치 작업의 변화 정보를 출력합니다. 또한 touched 이벤트는 터치 작업에 대한 최종 정보를 출력합니다. 주의할 점은 touched 이벤트가 발생할 때, touched 집합에는 어떤 Touch 객체도 없으며(활동적인 터치 작업이 없기 때문입니다), 이 경우 changeTouchs 집합을 사용해야 합니다.
이 이벤트는 문서의 모든 요소에서 발생하므로 페이지의 다른 부분을 각각 처리할 수 있습니다. 화면의 요소를 만지면 이 이벤트가 발생하는 순서는 다음과 같습니다:
touchstart
mouseover
mousemove
mousedown
mouseup
click
touchend
터치 이벤트를 지원하는 브라우저에는 iOS版 Safari, Android版 WebKit, beta版 Dolfin, OS6+BlackBerry WebKit, Opera Mobile 10.1LG 독점 OS의 Phantom 브라우저와 함께. 6+Chrome도 터치 이벤트를 지원합니다.
2.手势 이벤트
IOS 20의 Safari는手势 이벤트 세트를 도입했습니다. 두 손가락이 화면을 만지면手势가 발생하며,手势는 일반적으로 표시 항목의 크기를 변경하거나 표시 항목을 회전시킵니다. 세 가지手势 이벤트가 있습니다. 다음과 같습니다.
gesturestart:한 손가락이 스크린에 눌려 있고 다른 손가락이 스크린에 닿을 때 발생합니다.
gesturechange:스크린의 어떤 손가락의 위치가 변경될 때 발생합니다.
gestureend:어떤 손가락이 스크린에서 벗어나면 발생합니다.
이 이벤트는 두 손가락이 이벤트 수신容器的 터치에 모두 닿을 때만 발생합니다. 요소에 이벤트 처리기를 설정하면, 두 손가락이 해당 요소의 범위 내에 동시에 위치해야 합니다(이 요소는 목표입니다)Gesture 이벤트가 발생할 수 있습니다. 이 이벤트는 이벤트가 퍼블릭하기 때문에, 문서에 이벤트 처리기를 두면 모든 Gesture 이벤트를 처리할 수 있습니다. 이 경우, 이벤트의 목표는 두 손가락이 그 범위 내에 위치한 요소입니다.
터치 이벤트와 터치 이벤트 간에 관계가 있습니다. 한 손가락이 스크린에 올라가면 touchstart 이벤트가 발생합니다. 또 다른 손가락이 스크린에 올라가면 먼저 gesturestart 이벤트가 발생합니다. 또 다른 손가락이 스크린에 올라가면 먼저 gesturestart 이벤트가 발생하고, 그 다음에 해당 손가락의 touchstart 이벤트가 발생합니다. 한 손가락 또는 두 손가락이 스크린에서 슬라이딩하면 gesturechange 이벤트가 발생하지만, 한 손가락이 스크린에서 벗어나면 gestureend 이벤트가 발생하고, 그 다음에 해당 손가락의 touchend 이벤트가 발생합니다.
터치 이벤트와 마찬가지로, 각 터치 이벤트의 event 객체는 표준 마우스 이벤트 속성을 포함하고 있습니다: bubbles, cancelable, view, clientX, clientY, screenX, screenY, detail, altKey, shiftKey, ctrlKey, metaKey. 또한, 두 가지 추가 속성을 포함하고 있습니다: rotation과 scale. 중요한 점은, rotation 속성은 손가락 변화로 인한 회전 각도를 나타내며, 음수는 반시계 방향 회전, 양수는 시계 방향 회전을 나타냅니다(이 값은 0에서 시작됩니다). scale 속성은 두 손가락 간격의 변화를 나타내며(예를 들어 내부로 축소하면 거리가 줄어듭니다); 이 값은1시작하여 거리가 늘어날수록 커지고, 거리가 줄어들수록 작아집니다.
이제 터치 이벤트를 사용한 예제를 보여드리겠습니다:
function handleGestureEvent(event) {
var output = document.getElementById("output");
switch(event.type) {
case "gesturestart":
output.innerHTML = "터치 시작됨 (회전=" + event.ratation +",scale=" + event.scale + ")";
break;
case "gestureend":
output.innerHTML += "<br>Gesture ended (rotation+" + event.rotation + ",scale=" + event.scale + ")";
break;
case "gesturechange":
output.innerHTML += "<br>Gesture changed (rotation+=" + event.rotation + ",scale"+" + event.scale + ")";
break;
}
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);
이전에 보여준 터치 이벤트 예제와 같이, 여기의 코드는 각 이벤트를 동일한 함수에 연결하고, 그 함수를 통해 각 이벤트의 관련 정보를 출력합니다.
이것이 본 문서의 전체 내용입니다. 여러분의 학습에 도움이 되길 바라며, 갈등의 외침 가이드에 많은 지원을 부탁드립니다.
성명: 본 문서의 내용은 인터넷에서 가져왔으며, 원작자의 소유물로, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용으로, 이 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임을 지지 않습니다. 저작권 침해 내용이 발견되면 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com（보내는 이메일에서 #을 @으로 변경하시오）를 통해 신고하시고 관련 증거를 제공하시면, 해당 내용이 실제로 침해되었을 경우, 이 사이트는 즉시 해당 침해 내용을 제거할 것입니다。