모바일 단말에 간단한 진행바를 구현하기 위한 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
}

지금까지는 간단한 모바일 스크롤 막대가 구현되었습니다.

관련 권장 사항:

HTML5 비디오 자막 사용 및 생성 방법

HTML5에서 오디오 및 비디오 태그 사용

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