這篇文章主要介紹了關於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('.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觸控事件實作行動端簡易進度條的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!