How to implement a simple progress bar on the mobile side through HTML5 touch events

This article mainly introduces the relevant information on how to implement HTML5 touch events to implement a simple progress bar on the mobile terminal. The content is quite good. I will share it with you now and give it as a reference.

Preface

Many new events have been added to HTML, but due to compatibility issues, many events are not widely used. Next, I will introduce some useful 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 touch starting point and the distance between the button and the leftmost part 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 realized

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

html5 touch event realizes sliding up and down the touch screen page

Html5 mobile terminal award-winning seamless scrolling animation accomplish

The above is the detailed content of How to implement a simple progress bar on the mobile side through HTML5 touch events. For more information, please follow other related articles on the PHP Chinese website!