HTML5 터치 이벤트를 통해 모바일 측에 간단한 진행률 표시줄을 구현하는 방법

이 글에서는 HTML5 터치 이벤트를 구현하여 모바일 단말에서 간단한 진행 표시줄을 구현하는 방법에 대한 관련 정보를 주로 소개합니다. 내용이 꽤 좋아서 지금 공유해 보겠습니다.

머리말

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

Introduction

이러한 이벤트를 간략하게 소개하겠습니다.

1. touchstart: 이미 화면에 손가락이 있어도 손가락이 화면을 터치하면 트리거됩니다.

2. touchmove: 손가락이 화면을 미끄러질 때 지속적으로 트리거됩니다. 이 이벤트 중에 PreventDefault() 이벤트를 호출하면 스크롤을 방지할 수 있습니다.

3. touchend: 손가락이 화면에서 벗어날 때 트리거됩니다.

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

1. 터치: 현재 추적되는 터치 작업을 나타내는 터치 개체 배열입니다.

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

<p class="progress-wrapper">
    <p class="progress"></p>
    <p class="progress-btn"></p>
</p>

여기서 CSS 부분은 생략

dom 요소를 가져오고, 터치 시작점과 컨테이너의 가장 왼쪽 모서리에서 버튼까지의 거리를 초기화합니다.

const progressWrapper = document.querySelector('.progress-wrapper')
const progress = document.querySelector('.progress')
const progressBtn = document.querySelector('.progress-btn')
const progressWrapperWidth = progressWrapper.offsetWidth

let touchPoint = 0
let btnLeft = 0

듣기 touchstart event

progressBtn.addEventListener('touchstart', e => {
    let touch = e.touches[0]
    touchPoint = touch.clientX // 获取触摸的初始位置
 btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'], 10) // 此处忽略IE浏览器兼容性
})

touchmove 이벤트 듣기

progressBtn.addEventListener('touchmove', e => {
e.preventDefault()
    let touch = e.touches[0]

    let diffX = touch.clientX - touchPoint // 通过当前位置与初始位置之差计算改变的距离
    let btnLeftStyle = btnLeft + diffX // 为按钮定义新的left值

    touch.target.style.left = btnLeftStyle + 'px'

    progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + '%' // 通过按钮的left值与进度条容器长度的比值，计算进度条的长度百分比
})

일련의 논리적 연산을 통해 기본적으로 진행바를 구현했는데, 터치 위치가 진행률을 초과하는 경우 문제가 발견되었습니다. bar 컨테이너, 버그가 발생합니다. 몇 가지 제한사항

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

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

위 내용이 이 글의 전체 내용이기를 바랍니다. 모두의 학습에 도움이 됩니다. 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요!

관련 추천:

html5 터치 스크린 페이지의 위아래 슬라이딩을 구현하는 터치 이벤트

Html5 모바일 단말기 수상 경력에 빛나는 원활한 스크롤 애니메이션

위 내용은 HTML5 터치 이벤트를 통해 모바일 측에 간단한 진행률 표시줄을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!