모바일 단말에 간단한 진행바를 구현하기 위한 HTML5 터치 이벤트 구현 방법

HTML에는 새로운 이벤트가 많이 추가되었지만 호환성 문제로 인해 널리 사용되지 않는 이벤트가 많습니다. 다음으로 유용한 모바일 터치 이벤트인 touchstart, touchmove, touchend를 소개하겠습니다.

해당 이벤트를 간략하게 소개하자면 다음과 같습니다.

1. touchstart: 이미 화면에 손가락이 있는 경우에도 손가락이 화면을 터치하면 트리거됩니다.
2. touchmove: 손가락이 화면에서 미끄러질 때 지속적으로 트리거됩니다. 이 이벤트 중에 PreventDefault() 이벤트를 호출하면 스크롤을 방지할 수 있습니다.
3. touchend: 손가락이 화면을 떠날 때 트리거됩니다.

이러한 터치 이벤트에는 공통 DOM 속성이 있습니다. 또한 터치 추적을 위한 세 가지 속성이 포함되어 있습니다.

1. touches: 현재 추적된 터치 작업을 나타내는 터치 개체의 배열입니다.
2. targetTouches: 이벤트 대상과 관련된 터치 객체의 배열입니다.
3. changeTouches: 마지막 터치 이후 변경된 사항을 나타내는 Touch 개체의 배열입니다.

각 터치 개체에는 다음 속성이 포함되어 있습니다.

1. clientX: 뷰포트에 있는 터치 대상의 x 좌표입니다.
2. clientY: 뷰포트에 있는 터치 대상의 y 좌표입니다.
3. pageX: 페이지에 있는 터치 대상의 x 좌표입니다.
4. pageY: 페이지 내 터치 대상의 y 좌표입니다.
5. screenX: screenX: 화면 내 터치 대상의 x 좌표입니다.
6. screenY: screenX: 화면 내 터치 대상의 x 좌표입니다.
7. 식별자: 터치를 식별하는 고유 ID입니다.
8. target: screenX: 화면 내 터치 대상의 x 좌표입니다.

이제 터치 이벤트의 특성을 이해했으므로 흥미로운 실습 세션을 시작하겠습니다.

터치 이벤트를 사용하여 모바일 측에서 슬라이딩 진행률 표시줄을 구현해 보겠습니다.

먼저 HTML을 배치해 봅시다

 <div class=progress-wrapper> <div class=progress></div> <div class=progress-btn></div></div>

여기서는 CSS 부분을 생략했습니다.

DOM 요소를 가져오고 터치 시작점과 버튼과 컨테이너의 가장 왼쪽 부분 사이의 거리를 초기화합니다.

 const ProgressWrapper = document.querySelector('.progress-wrapper')const Progress = document.querySelector('.progress')const ProgressBtn = document.querySelector('.progress-btn')const ProgressWrapperWidth = ProgressWrapper.offsetWidthlet touchPoint = 0let btnLeft = 0

터치스타트 이벤트 듣기

 ProgressBtn.addEventListener('touchstart', e => { let touch = e.touches[0] touchPoint = touch.clientX // 터치의 초기 위치를 가져옵니다. btnLeft =parseInt(getCompulatedStyle(progressBtn, null)['left'] , 10 ) // 여기서는 IE 브라우저 호환성을 무시합니다.})

touchmove 이벤트 듣기

 ProgressBtn.addEventListener('touchmove', e => {e.preventDefault() let touch = e.touches[0] let diffX = touch.clientX - touchPoint // 현재 위치와 초기 위치의 차이로 변경된 거리를 계산합니다. position let btnLeftStyle = btnLeft + diffX // 버튼의 새 왼쪽 값 정의 touch.target.style.left = btnLeftStyle + 'px' Progress.style.width = (btnLeftStyle / ProgressWrapperWidth) * 100 + '%' // 진행률 표시줄 컨테이너의 길이에 대한 버튼의 왼쪽 값의 비율을 통해 진행률 표시줄의 길이 백분율을 계산합니다.})

일련의 논리 연산을 통해 기본적으로 진행률 표시줄이 구현되었지만 터치 위치가 진행률 표시줄 컨테이너를 초과하면 몇 가지 제한 사항이 발생합니다.

 if (btnLeftStyle > ProgressWrapperWidth) { btnLeftStyle = ProgressWrapperWidth } else if (btnLeftStyle < 0) { btnLeftStyle = 0}

이 시점에서 간단한 모바일 스크롤바가 구현되었습니다.

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.