Implementation method of HTML5 touch event to implement simple progress bar on mobile terminal

This article mainly introduces the implementation method of HTML5 touch event to implement a simple progress bar on the mobile terminal. It has a certain reference value. Now I share it with you. Friends in need can refer to it

Preface

Many new events have been added to HTML, but due to compatibility issues, many events are not widely used. Next, we will introduce some useful ones. Mobile touch events: touchstart, touchmove, touchend.

Introduction

Let’s briefly introduce these events:

1. touchstart: Triggered when a finger touches the screen, even if there is already a finger on the screen.

2. touchmove: Triggered continuously when the finger slides on the screen. During this event, calling the preventDefault() event can prevent scrolling.

3. touchend: Triggered when the finger leaves the screen.

These touch events have common dom attributes. In addition, they also contain three properties for tracking touches:

1. touches: An array of touch objects representing the currently tracked touch operations.

2. targetTouches: Array of Touch objects specific to event targets.

3. changeTouches: An array of Touch objects that represent what has changed since the last touch.

Each touch object contains the following properties:

1. clientX: The x coordinate of the touch target in the viewport.

2. clientY: The y coordinate of the touch target in the viewport.

3. pageX: The x coordinate of the touch target in the page.

4. pageY: The y coordinate of the touch target in the page.

5. screenX: screenX: The x coordinate of the touch target in the screen.

6. screenY: screenX: The x coordinate of the touch target in the screen.

7. identifier: A unique ID that identifies the touch.

8. target: screenX: The x coordinate of the touch target in the screen.

After understanding the characteristics of touch events, let’s start the exciting actual combat session

Practical combat

Let’s use touch events to implement a sliding progress bar on the mobile side

Let’s lay out the HTML first

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

CSS part is omitted here

Get the dom element and initialize the distance between the touch starting point and the button from the leftmost corner of the container

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

Listen to touchstart Event

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

Listen to touchmove event

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值与进度条容器长度的比值，计算进度条的长度百分比
})

Through a series of logical operations, we The progress bar has been basically implemented, but a problem has been discovered. When the touch position exceeds the progress bar container, a bug will occur. Let's make some restrictions

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

So far, a simple mobile scroll bar has been implemented

Related recommendations:

How to use and create HTML5 video subtitles

The use of audio and video tags in HTML5

The above is the detailed content of Implementation method of HTML5 touch event to implement simple progress bar on mobile terminal. For more information, please follow other related articles on the PHP Chinese website!