HTML5觸控事件實作行動端簡易進度條的實作方法

HTML中新加入了許多新的事件，但由於相容性的問題,許多事件都沒有廣泛的應用，接下來為大家介紹一些好用的行動端觸控事件: touchstart、touchmove、touchend。

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

1. touchstart： 當手指觸摸螢幕時候觸發，即使已經有一個手指放在螢幕上也會觸發。
2. touchmove：當手指在螢幕上滑動的時候連續地觸發。在這個事件發生期間，呼叫preventDefault()事件可以阻止捲動。
3. touchend：當手指從螢幕離開的時候觸發。

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

1. touches：表示目前追蹤的觸控操作的touch物件的陣列。
2. targetTouches：特定於事件目標的Touch物件的陣列。
3. changeTouches：表示自上次觸碰以來發生了什麼改變的Touch物件的陣列。

每個touch物件包含的屬性如下：

1. clientX：觸碰目標在視窗中的x座標。
2. clientY：觸碰目標在視窗中的y座標。
3. pageX：觸碰目標在頁面中的x座標。
4. pageY：觸碰目標在頁面中的y座標。
5. screenX：screenX：觸碰目標在螢幕中的x座標。
6. screenY：screenX：觸碰目標在螢幕中的x座標。
7. identifier：標識觸控的唯一ID。
8. 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')constgressBtn = document.querySelector('.progress-btn')constgressm = 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}

至此，一個簡單的行動端捲軸就實現了

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。