js 모 바 일 클 라 이언 트 - 터치 이벤트 시 뮬 레이 션 클릭, 슬라이드 이벤트
3375 단어 js
;(function(doc, win, undefined) {
"use strict";
var start = { //
x: 0,
y: 0
},
delta = { //
x: 0,
y: 0
},
startTime = 0, //
curTime=0, //
longTime = 200,//200ms
longCurTime=1000, //1000ms
target,
minDelta = 50,//
timer=null;
//
function createEvent(type) {
var event;
try {
event = new Event(type);
} catch (e) {
event = doc.createEvent("Events");
event.initEvent(type, true, true);
}
return event;
}
//
function fireEvent(type, target) {
var event = createEvent(type);
target.dispatchEvent(event);
}
//
function onTouchStart(event) {
var touch = event.touches[0];
//
if (event.cancelable) {
//
if (!event.defaultPrevented) {
event.preventDefault();
}
}
target = event.target;
//
start.x = touch.pageX;
start.y = touch.pageY;
delta.x = 0;
delta.y = 0;
//
startTime =new Date();
// 400ms longCurTap
timer=setInterval(function(){
curTime+=10;
if(curTime==longCurTime){
fireEvent("longCurTap", target);
}
//console.log(curTime);
},1);
}
//
function onTouchMove(event) {
var touch = event.touches[0];
//
delta.x = touch.pageX - start.x;
delta.y = touch.pageY - start.y;
}
//
function onTouchEnd(event) {
// ( longCurTap)
clearInterval(timer);
curTime=0;
// touch
var touch = event.changedTouches[0],
deltaTime =new Date() - startTime,
//
deltaX = Math.abs(delta.x),
deltaY = Math.abs(delta.y);
//console.log(deltaTime);
//
if (touch.pageX === start.x && touch.pageY === start.y) {
// 200ms
if (deltaTime < longTime) {
fireEvent("tap", target);//
//console.log(deltaTime);
} else if(deltaTime > longTime && deltaTime < longCurTime/2){
fireEvent("longTap", target);//
}
}
// 30
if (deltaX > minDelta || deltaY > minDelta) {
// x,y
if (deltaX > deltaY) {
if (delta.x > 0) {
fireEvent("swipeRight", target);
} else {
fireEvent("swipeLeft", target);
}
} else {
if (delta.y > 0) {
fireEvent("swipeDown", target);
} else {
fireEvent("swipeUp", target);
}
}
}
}
//
doc.addEventListener("touchstart", onTouchStart);
doc.addEventListener("touchmove", onTouchMove);
doc.addEventListener("touchend", onTouchEnd);
}(document, window));
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.