HTML5触摸事件实现移动端简易进度条的实现方法

<p class="progress-wrapper">

    <p class="progress"></p>

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

</p>

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

progressBtn.addEventListener('touchstart', e => {

    let touch = e.touches[0]

    touchPoint = touch.clientX // 获取触摸的初始位置

 btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'], 10) // 此处忽略IE浏览器兼容性

})

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

})

if (btnLeftStyle > progressWrapperWidth) {

    btnLeftStyle = progressWrapperWidth

    } else if (btnLeftStyle < 0) {

    btnLeftStyle = 0

}