터치 인터페이스에 대한 강력한 지원을 제공하기 위해 터치 이벤트는 터치 스크린이나 터치 패드에서 사용자 작업에 응답하는 기능을 제공합니다.
인터페이스 터치이벤트TouchEvent는 터치 표면(터치 스크린, 터치 패드 등)에서 손가락의 상태 변화를 설명하는 이벤트 유형입니다. 이러한 유형의 이벤트는 하나 이상의 터치 포인트를 설명하는 데 사용되므로 개발자는 터치 포인트의 움직임, 터치 포인트의 증가 및 감소 등을 감지할 수 있습니다. 각 터치 개체는 터치 지점을 나타냅니다. 각 터치 지점은 위치, 크기, 모양, 압력 수준 및 대상 요소로 설명됩니다. TouchList 개체는 여러 터치 지점의 목록을 나타냅니다.
터치 이벤트 종류터치 관련 상태 변경을 구별하기 위해 여러 유형의 터치 이벤트가 있습니다. 터치 이벤트의 TouchEvent.type 속성을 확인하여 현재 이벤트의 유형을 확인할 수 있습니다.
기본 원리는 슬라이딩 시작(touchStart)과 슬라이딩 끝(touchEnd)의 좌표 위치를 기록하고 상대 위치를 계산하는 것입니다.
touchStart:function(e){ startX = e.touches[0].pageX; e = e || window.event }, touchEnd:function(e){ const that = endX = e.changedTouches[0].pageX; endY = e.changedTouches[0].pageY; that.upOrDown(startX,startY,endX,endY);},upOrDown:function (startX, startY, endX, endY) { const that = this; let 방향 = that.GetSlideDirection(startX, startY, endX, endY); (방향) { 사례 0: console.log(슬라이딩 없음); 사례 1: console.log(위); 사례 2: console.log(아래); 3: console.log(왼쪽); case 4: console.log(오른쪽); break; 기본값: break; } },//복귀 방향 1: 위쪽, 2: 아래쪽, 시작점과 끝 point : 왼쪽, 4: 오른쪽, 0: 슬라이딩하지 않음 GetSlideDirection:function (startX, startY, endX, endY) { const that = this; let dy = startY - endY; 0; //슬라이딩 거리가 너무 짧은 경우 if(Math.abs(dx) < 2 && Math.abs(dy) < 2) { return result } let angle = that.GetSlideAngle(dx, dy); 각도 > = -45 && 각도 < 45) { 결과 = 4; }else if (각도 >= 45 && 각도 < 135) { 결과 = 1 }else if (각도 >= -135 && 각도 < -45) { 결과 = 2; } else if ((각도 >= 135 && 각도 <= 180) || (각도 >= -180 && 각도 < -135)) { 결과 = 3; result; }, //각도 반환 GetSlideAngle:function (dx, dy) { return Math.atan2(dy, dx) * 180 / Math.PI } 네이티브 JS 메서드H5의 새로운 메서드 외에도 기본 JS를 사용하여 뷰의 슬라이딩 방향을 결정할 수도 있습니다. 코드는 다음과 같습니다(직접 실행할 수 있음).
Chrome은 항상 document.body.scrollTop을 0으로 설정했으며 document.documentElement.scrollTop으로 변경해야 합니다.
<!DOCTYPE html><html><head> <meta charset=utf-8> <title> VeVb文网(vevb.com)</title> <style> div { border: 1px width: 200px height; : 100px; 오버플로: 스크롤; } </style></head><body style=overflow: 스크롤><h1>안녕하세요. 단어</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1> <h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요 단어</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1> <h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요 단어</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1> <h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요 단어</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1> <h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요 단어</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1><h1>안녕하세요</h1> <h1>안녕하세요 단어</h1><h1>안녕하세요 단어</h1><h1>안녕하세요 단어</h1><h1>안녕하세요 단어</h1><script> 함수 scroll( fn ) { var beforeScrollTop = document.documentElement.scrollTop, fn = fn || function() {}; console.log('beforeScrollTop',beforeScrollTop) window.addEventListener(scroll, function() { var afterScrollTop = 문서 .documentElement.scrollTop, delta = afterScrollTop - beforeScrollTop; console.log('beforeScrollTop',beforeScrollTop); if( delta === 0 ) return false; fn( delta > 0 ? down : up ); false); } 스크롤(함수(방향) { console.log(방향) });</script></body></html>위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.