扣丁學堂HTML5培訓簡述HTML5觸摸事件實現移動端簡易進度條的實現方法

本篇文章扣丁學堂HTML5培訓小編給讀者們分享分享一下HTML5觸摸事件實現移動端簡易進度條的實現方法，對此感興趣或者是對HTML5開發技術感興趣的小夥伴就隨小編來了解一下吧。

HTML中新添加了許多新的事件，但因爲兼容性的問題，許多事件都沒有普遍的應用，接下來爲你們介紹一些好用的移動端觸摸事件: touchstart、touchmove、touchend。

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

touchstart： 當手指觸摸屏幕時候觸發，即便已經有一個手指放在屏幕上也會觸發。

touchmove：當手指在屏幕上滑動的時候連續地觸發。在這個事件發生期間，調用preventDefault()事件能夠阻止滾動。

touchend：當手指從屏幕上離開的時候觸發。

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

touches：表示當前跟蹤的觸摸操做的touch對象的數組。

targetTouches：特定於事件目標的Touch對象的數組。

changeTouches：表示自上次觸摸以來發生了什麼改變的Touch對象的數組。

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

clientX：觸摸目標在視口中的x座標。

clientY：觸摸目標在視口中的y座標。

pageX：觸摸目標在頁面中的x座標。

pageY：觸摸目標在頁面中的y座標。

screenX：screenX：觸摸目標在屏幕中的x座標。

screenY：screenX：觸摸目標在屏幕中的x座標。

identifier：標識觸摸的惟一ID。

target：screenX：觸摸目標在屏幕中的x座標。

瞭解了觸摸事件的特徵，那就開始緊張刺激的實戰環節吧。

咱們先進行HTML的佈局

<div class="progress-wrapper">

<div class="progress"></div>

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

</div>

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事件

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值與進度條容器長度的比值，計算進度條的長度百分比

})

經過一系列的邏輯運算，咱們的進度條已經基本實現了，可是發現了一個問題，當觸摸位置超出進度條容器時，會產生bug，咱們再來作一些限制

if (btnLeftStyle > progressWrapperWidth) {

btnLeftStyle = progressWrapperWidth

} else if (btnLeftStyle < 0) {

btnLeftStyle = 0

}

至此，一個簡單的移動端滾動條就實現了。

想要了解更多關於HTML5開發方面內容的小夥伴，請關注扣丁學堂HTML5培訓官網、微信等平臺，扣丁學堂IT職業在線學習教育有專業的HTML5講師爲您指導，此外扣丁學堂老師精心推出的HTML5視頻教程定能讓你快速掌握HTML5從入門到精通開發實戰技能。