어떻게 원생 JS 를 이용 하여 터치 슬라이딩 감청 사건 을 실현 합 니까?

머리말
오늘 은 작은 Demo 를 쓰 는데 왼쪽 에서 오른쪽으로 미 끄 러 지 는 논리 와 관련 된 부분 이 있 습 니 다.플러그 인 을 사용 하려 고 했 는데 원생 JS 로 미 끄 러 지 는 감청 을 쓰 지 않 은 지 오래 되 었 다 는 생각 에 원생 JS 로 실현 해 보 았 습 니 다.온고지신 이 니까 기록 도 같이 하 겠 습 니 다.먼저 실 현 된 효 과 를 붙 입 니 다.

구상 하 다
미 끄 러 운 터치 슬라이딩 사건 의 감청 을 쓰 려 면 다음 과 같은 세 가지 논 리 를 고려 해 야 한다.

거리:미끄럼 거 리 는 40

보다 커 야 한다.

시간:미끄럼 시간 이 0.5 초,즉 500 밀리초 안에 손가락 을 누 르 고 드래그 하 며 떠 나 는 것 을 완성 합 니 다(손가락 만 화면 에 터치 되 지 않도록 합 니 다)

미끄럼 방향:

좌우 로 미 끄 러 지 는 조건 은 X 축 이 이동 하 는 거리 가 Y 축 이 이동 하 는 거리 보다 크 고 정규 가 왼쪽으로,마이너스 가 오른쪽

이다.

위아래 로 미 끄 러 지 는 조건 은 Y 축 이 이동 하 는 거리 가 X 축 이 이동 하 는 거리 보다 크 고 정규 가 위로,마이너스 가 아래로

기본 적 인 구상 이 있 으 면 우 리 는 이 사고 에 따라 코드 를 완성 할 수 있 습 니 다~
감청 사건
감청 터치 가 미 끄 러 지면 자 연 스 럽 게 다음 세 가지 터치 사건 이 필요 합 니 다.
1.touchstart 터치 시작,손가락 으로 화면 을 클릭 하면 터치(멀 티 터치 가능,뒤쪽 손가락 도 터치 가능)
2.touchmove 접점 변경,슬라이딩 시 지속 발동
3.터치 엔 드 터치 종료,손가락 이 화면 을 떠 날 때 터치
이 세 개의 터치 사건 은 각각 세 개의 터치 대상 목록 을 포함한다.(터치 점 에 따라 다 중 터치 제 어 를 실현 할 수 있다)
1.touches:현재 화면의 모든 손가락 터치 포인트 목록
2.targetTouches:현재 DOM 요소 의 손가락 목록
3.changed Touches:현재 이벤트 손가락 목록
동시에 모든 터치 대상 Touch 에 포 함 된 속성 은 다음 과 같 습 니 다.
-identifier:표지 터치 의 유일한 ID
-pageX:터치 포인트 가 페이지 에 있 는 x 좌표
-페이지 Y:터치 포인트 가 페이지 에 있 는 y 좌표
-screenX:터치 점 이 화면 에 있 는 x 좌표
-screenY:터치 포인트 가 화면 에 있 는 y 좌표
-clientX:터치 포인트 가 시야 에 있 는 x 좌표
-clientY:시점 에 있 는 y 좌 표를 터치 한다.
-target:터치 의 DOM 노드
코드 구현
위의 구상 과 터치 사건 의 기초 가 있 으 면 우 리 는 코드 를 쉽게 두 드 릴 수 있 습 니 다~

let box = document.querySelector('body') //     
let startTime = '' //       
let startDistanceX = '' //     X   
let startDistanceY = '' //     Y   
let endTime = '' //       
let endDistanceX = '' //     X   
let endDistanceY = '' //     Y   
let moveTime = '' //     
let moveDistanceX = '' //     X   
let moveDistanceY = '' //     Y   
box.addEventListener("touchstart", (e) => {
    startTime = new Date().getTime()
    startDistanceX = e.touches[0].screenX
    startDistanceY = e.touches[0].screenY
})
box.addEventListener("touchend", (e) => {
    endTime = new Date().getTime()
    endDistanceX = e.changedTouches[0].screenX
    endDistanceY = e.changedTouches[0].screenY
    moveTime = endTime - startTime
    moveDistanceX = startDistanceX - endDistanceX
    moveDistanceY = startDistanceY - endDistanceY
    console.log(moveDistanceX, moveDistanceY)
    //         40       500  
    if ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {
        //   X          Y      
        if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
        //   
        console.log(moveDistanceX > 0 ? ' ' : ' ')
        } else {
        //   
        console.log(moveDistanceY > 0 ? ' ' : ' ')
        }
    }
})

실행 해 보 세 요.

이 를 통 해 알 수 있 듯 이 터치 시간 이 500 ms 이상 이면 촉발 되 지 않 고 미끄럼 거리 가 40 보다 작 아 도 촉발 되 지 않 으 며 각도 가 있 는 미끄럼 이 라면 XY 축 이동 거리 가 가장 먼 것 을 기준 으로 한다.완벽 한 실현!
후기
전단 틀 의 발전 이 날로 빨 라 지면 서 많은 사람들 이 직접 학습 틀 에 착수 하 는 것 도 부담 이 없고 원생 JS 의 학습 에 대해 그렇게 중시 하지 않 는 다.그러나 모든 변 화 는 그 종 류 를 떠 나 지 않 는 다.구조의 장점 은 그의 디자인 사상 과 모델 에 있다.깊이 이해 하려 면 원생 JS 를 바탕 으로 멀리 가 려 면 기 초 를 다 져 야 한다.왜냐하면 만장 의 고 층 건물 이 평지 에서 일어나 지 않 기 때문이다.
네 이 티 브 JS 를 이용 하여 터치 슬라이딩 감청 사건 을 어떻게 실현 하 는 지 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 JS 터치 슬라이딩 감청 사건 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!