首頁 >web前端 >html教學 >HTML5觸控事件實作行動端簡易進度條的實作方法

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

不言原創: 2018-05-05 10:09:062420瀏覽

這篇文章主要介紹了關於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的佈局

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

CSS部分此處省略

取得dom元素，並初始化觸控起點和按鈕離容器最左方的距離

const progressWrapper = document.querySelector(&#39;.progress-wrapper&#39;)
const progress = document.querySelector(&#39;.progress&#39;)
const progressBtn = document.querySelector(&#39;.progress-btn&#39;)
const progressWrapperWidth = progressWrapper.offsetWidth

let touchPoint = 0
let btnLeft = 0

監聽touchstart事件

progressBtn.addEventListener(&#39;touchstart&#39;, e => {
    let touch = e.touches[0]
    touchPoint = touch.clientX // 获取触摸的初始位置
 btnLeft = parseInt(getComputedStyle(progressBtn, null)[&#39;left&#39;], 10) // 此处忽略IE浏览器兼容性
})

監聽touchmove事件

progressBtn.addEventListener(&#39;touchmove&#39;, e => {
e.preventDefault()
    let touch = e.touches[0]

    let diffX = touch.clientX - touchPoint // 通过当前位置与初始位置之差计算改变的距离
    let btnLeftStyle = btnLeft + diffX // 为按钮定义新的left值

    touch.target.style.left = btnLeftStyle + &#39;px&#39;

    progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + &#39;%&#39; // 通过按钮的left值与进度条容器长度的比值，计算进度条的长度百分比
})

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

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

至此，一個簡單的行動裝置捲軸實現了

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

相關文章