터치 스크린 장치에서는 터치 이벤트의 2 차 캡슐화로 비교적 기본적인 제스처를 구현해야합니다.
Zepto는 모바일 장치에서 비교적 높은 사용률을 가진 클래스 라이브러리이지만 터치 모듈로 시뮬레이션 된 일부 이벤트에는 일부 Android 장치에서 이벤트 침투 버그가있는 탭 이벤트와 같은 일부 호환성 문제가 있으며 다른 유형의 이벤트도 다소 호환성 문제가 있습니다.
그래서 나는 단순히 일반적으로 사용되는 제스처 사건을 혼자서 캡슐화했습니다. 테스트 할 실제 장치가 많지 않기 때문에 호환성 문제가있을 수 있습니다. 다음 코드는 iOS 7 및 Andorid 4의 몇 가지 일반적인 브라우저에서만 테스트됩니다.
탭 이벤트
탭 이벤트는 PC 브라우저의 클릭 효과와 동일합니다. 클릭 이벤트는 터치 스크린 장치에서 여전히 사용할 수 있지만 많은 장치를 클릭하면 약간의 지연이 있습니다. "클릭"이벤트에 신속하게 응답하려면 터치 이벤트를 사용하여 달성해야합니다.
코드 사본은 다음과 같습니다.
var starttx, startty;
element.addeventListener ( 'touchStart', function (e) {
var touches = e.touches [0];
starttx = touches.clientx;
startty = touches.clienty;
}, 거짓 );
element.addeventListener ( 'touchend', function (e) {
var touches = e.ChangedTouches [0],
endtx = touches.clientx,
endty = touches.clienty;
// 일부 장치의 경우 터치 이벤트가 더 민감하여 손가락을 누르고 방출 할 때 이벤트 좌표가 약간 변경됩니다.
if (math.abs (starttx -endtx) <6 && math.abs (startty -endty) <6) {
Console.log ( 'Fire Tap Event');
}
}, 거짓 );
DoubleTap 이벤트
DoubleTap 이벤트는 손가락이 동일한 위치 범위 내에서 그리고 매우 짧은 시간 내에 화면을 두 번 탭할 때 트리거되는 이벤트입니다. 일부 브라우저에서 DoubleTap 이벤트는 텍스트를 선택합니다. 텍스트를 선택하지 않으려면 사용자-선택의 CSS 속성을 요소에 추가 할 수 있습니다.
코드 사본은 다음과 같습니다.
var istouchend = false,
지난번 = 0,
lastx = null,
lastty = null,
FirstTouchend = true,
Body = Document.body,
dtaptimer, starttx, startty, starttime;
element.addeventListener ( 'touchStart', function (e) {
if (dtaptimer) {
클리어 타임 아웃 (dtaptimer);
dtaptimer = null;
}
var touches = e.touches [0];
starttx = touches.clientx;
startty = touches.clienty;
}, 거짓 );
element.addeventListener ( 'touchend', function (e) {
var touches = e.ChangedTouches [0],
endtx = touches.clientx,
endty = touches.clienty,
지금 = date.now (),
지속 시간 = 지금 - 마지막 시간;
// 먼저, 단일 탭 이벤트를 트리거 할 수 있는지 확인하십시오.
if (math.abs (starttx -endtx) <6 && math.abs (starttx -endtx) <6) {
// 두 탭 사이의 간격이 500 밀리 초 이내에 있는지 확인하십시오.
if (시간 <301) {
//이 탭의 위치와 마지막 탭의 위치는 특정 범위 내에서 오류를 허용합니다.
if (lasttx! == null &&
Math.abs (lasttx -endtx) <45 &&
Math.abs (Lastty -Endty) <45) {
FirstTouchend = true;
lasttx = lastty = null;
Console.log ( 'Fire Double Tap Event');
}
}
또 다른{
lasttx = endtx;
마지막 = 종료;
}
}
또 다른{
FirstTouchend = true;
lasttx = lastty = null;
}
마지막 시간 = 지금;
}, 거짓 );
// 손가락이 iOS 사파리에서 화면을 너무 빨리 탭합니다.
// 터치 스타트 및 터치 엔드 이벤트가 두 번째로 응답되지 않을 가능성이 있습니다.
// 동시에 손가락 터치가 클릭을 트리거하지 않습니다.
if (~ navigator.useragent.tolowercase (). indexof ( 'iPhone OS')) {
body.addeventListener ( 'touchstart', function (e) {
starttime = date.now ();
}, 진실 );
body.addeventListener ( '터치 엔드', 함수 (e) {
var nolongtap = date.now () -StartTime <501;
if (firstTouchend) {
FirstTouchend = false;
if (nolongtap && e.target === 요소) {
dtaptimer = settimeout (function () {
FirstTouchend = true;
lasttx = lastty = null;
Console.log ( 'Fire Double Tap Event');
}, 400);
}
}
또 다른{
FirstTouchend = true;
}
}, 진실 );
// 손가락이 iOS에서 화면을 여러 번 탭하면 클릭 이벤트가 트리거되지 않습니다.
element.addeventListener ( 'click', function (e) {
if (dtaptimer) {
클리어 타임 아웃 (dtaptimer);
dtaptimer = null;
FirstTouchend = true;
}
}, 거짓 );
}
Longtap 이벤트
Longtap 이벤트는 손가락이 화면을 오랫동안 유지하고 움직이지 않은 상태에서 트리거되는 이벤트입니다.
코드 사본은 다음과 같습니다.
var starttx, startty, ltaptimer;
element.addeventListener ( 'touchStart', function (e) {
if (ltaptimer) {
클리어 타임 아웃 (ltaptimer);
ltaptimer = null;
}
var touches = e.touches [0];
starttx = touches.clientx;
startty = touches.clienty;
ltaptimer = settimeout (function () {
Console.log ( 'Fire Long Tap Event');
}, 1000);
e.preventDefault ();
}, 거짓 );
element.addeventListener ( 'touchmove', function (e) {
var touches = e.touches [0],
endtx = touches.clientx,
endty = touches.clienty;
if (ltaptimer && (math.abs (endtx -startx)> 5 || math.abs (endty -startty)> 5) {
클리어 타임 아웃 (ltaptimer);
ltaptimer = null;
}
}, 거짓 );
element.addeventListener ( 'touchend', function (e) {
if (ltaptimer) {
클리어 타임 아웃 (ltaptimer);
ltaptimer = null;
}
}, 거짓 );
스 와이프 이벤트
스 와이프 이벤트는 손가락이 화면에 미끄러질 때 트리거 된 이벤트입니다. Swipeleft (왼쪽), Swiperight (오른쪽), Swipeup (위) 및 스 와이딩 (아래)으로 나뉩니다.
코드 사본은 다음과 같습니다.
var istouchmove, starttx, startty;
element.addeventListener ( 'touchStart', function (e) {
var touches = e.touches [0];
starttx = touches.clientx;
startty = touches.clienty;
istouchmove = false;
}, 거짓 );
element.addeventListener ( 'touchmove', function (e) {
istouchmove = true;
e.preventDefault ();
}, 거짓 );
element.addeventListener ( 'touchend', function (e) {
if (! istouchmove) {
반품;
}
var touches = e.ChangedTouches [0],
endtx = touches.clientx,
endty = touches.clienty,
distionx = starttx -endtx
distiney = startty -endty,
isswipe = false;
if (math.abs (distionx)> = math.abs (distoney)) {
if (distonex> 20) {
Console.log ( 'Fire Swipe Left Event');
isswipe = true;
}
else if (distonx <-20) {
Console.log ( 'Fire Swipe Right Event');
isswipe = true;
}
}
또 다른{
if (distoney> 20) {
Console.log ( 'Fire Swipe Up Event');
isswipe = true;
}
else if if (distoney <-20) {
Console.log ( 'Fire Swipe Down 이벤트');
isswipe = true;
}
}
if (isswipe) {
Console.log ( 'Fire Swipe Event');
}
}, 거짓 );
위에서 시뮬레이션 된 모든 이벤트는 단일 에벤트로 캡슐화됩니다. 완전한 코드 주소 : https://github.com/chenmnkken/monoevent, 필요한 친구, 봐 ~
PS : JS의 일반적으로 사용되는 이벤트 유형과 기능 기능을 요약하는 JS 이벤트에 대한 온라인 쿼리 도구를 권장합니다.
JavaScript 이벤트 및 기능의 전체 목록 :
http://tools.vevb.com/table/javaScript_event