HTML5觸摸事件怎樣實(shí)現(xiàn)移動端簡易進(jìn)度條？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計師、開發(fā)人員和項目經(jīng)理組成的專業(yè)建站團(tuán)隊，負(fù)責(zé)網(wǎng)站視覺設(shè)計、用戶體驗(yàn)優(yōu)化、交互設(shè)計和前端開發(fā)等方面的工作，以確保網(wǎng)站外觀精美、網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)易于使用并且具有良好的響應(yīng)性。

                                                         這篇文章主要介紹了關(guān)于HTML5觸摸事件實(shí)現(xiàn)移動端簡易進(jìn)度條的實(shí)現(xiàn)方法，有著一定的參考價值，現(xiàn)在分享給大家，有需要的朋友可以參考一下

前言

HTML中新添加了許多新的事件，但由于兼容性的問題,許多事件都沒有廣泛的應(yīng)用，接下來為大家介紹一些好用的移動端觸摸事件: touchstart、touchmove、touchend。

介紹

下面我們來簡單介紹一下這幾個事件:

1. touchstart： 當(dāng)手指觸摸屏幕時候觸發(fā)，即使已經(jīng)有一個手指放在屏幕上也會觸發(fā)。

2. touchmove：當(dāng)手指在屏幕上滑動的時候連續(xù)地觸發(fā)。在這個事件發(fā)生期間，調(diào)用preventDefault()事件可以阻止?jié)L動。

3. touchend：當(dāng)手指從屏幕上離開的時候觸發(fā)。

這些觸摸事件具有常見的dom屬性。此外，他們還包含著三個用于跟蹤觸摸的屬性：

1. touches：表示當(dāng)前跟蹤的觸摸操作的touch對象的數(shù)組。

2. targetTouches：特定于事件目標(biāo)的Touch對象的數(shù)組。

3. changeTouches：表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。

每個touch對象包含的屬性如下：

1. clientX：觸摸目標(biāo)在視口中的x坐標(biāo)。

2. clientY：觸摸目標(biāo)在視口中的y坐標(biāo)。

3. pageX：觸摸目標(biāo)在頁面中的x坐標(biāo)。

4. pageY：觸摸目標(biāo)在頁面中的y坐標(biāo)。

5. screenX：screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。

6. screenY：screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。

7. identifier：標(biāo)識觸摸的唯一ID。

8. target：screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。

了解了觸摸事件的特征，那就開始緊張刺激的實(shí)戰(zhàn)環(huán)節(jié)吧

實(shí)戰(zhàn)

下面我們來通過使用觸摸事件來實(shí)現(xiàn)一個移動端可滑動的進(jìn)度條

我們先進(jìn)行HTML的布局

CSS部分此處省略

獲取dom元素，并初始化觸摸起點(diǎn)和按鈕離容器最左方的距離

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

監(jiān)聽touchstart事件

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

監(jiān)聽touchmove事件

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

    let diffX = touch.clientX - touchPoint // 通過當(dāng)前位置與初始位置之差計算改變的距離
    let btnLeftStyle = btnLeft + diffX // 為按鈕定義新的left值

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

    progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + '%' // 通過按鈕的left值與進(jìn)度條容器長度的比值，計算進(jìn)度條的長度百分比
})

通過一系列的邏輯運(yùn)算，我們的進(jìn)度條已經(jīng)基本實(shí)現(xiàn)了，但是發(fā)現(xiàn)了一個問題，當(dāng)觸摸位置超出進(jìn)度條容器時，會產(chǎn)生bug，我們再來做一些限制

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

至此，一個簡單的移動端滾動條就實(shí)現(xiàn)了

感謝各位的閱讀！看完上述內(nèi)容，你們對HTML5觸摸事件怎樣實(shí)現(xiàn)移動端簡易進(jìn)度條大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

分享文章：HTML5觸摸事件怎樣實(shí)現(xiàn)移動端簡易進(jìn)度條-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://weahome.cn/article/djoigo.html