前言

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

介紹

下面我們來(lái)簡(jiǎn)單介紹一下這幾個(gè)事件:

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

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

touchend：當(dāng)手指從屏幕上離開(kāi)的時(shí)候觸發(fā)。

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

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

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

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

每個(gè)touch對(duì)象包含的屬性如下：

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

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

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

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

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

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

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

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

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

實(shí)戰(zhàn)

下面我們來(lái)通過(guò)使用觸摸事件來(lái)實(shí)現(xiàn)一個(gè)移動(dòng)端可滑動(dòng)的進(jìn)度條

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

 p >
CSS部分此處省略
獲取dom元素，并初始化觸摸起點(diǎn)和按鈕離容器最左方的距離
const progressWrapper = document.querySelector( .progress-wrapper )const progress = document.querySelector( .progress )const progressBtn = document.querySelector( .progress-btn )const progressWrapperWidth = progressWrapper.offsetWidthlet touchPoint = 0let btnLeft = 0
監(jiān)聽(tīng)touchstart事件
progressBtn.addEventListener( touchstart , e = { let touch = e.touches[0] touchPoint = touch.clientX // 獲取觸摸的初始位置 btnLeft = parseInt(getComputedStyle(progressBtn, null)[ left ], 10) // 此處忽略IE瀏覽器兼容性})
監(jiān)聽(tīng)touchmove事件
progressBtn.addEventListener( touchmove , e = {e.preventDefault() let touch = e.touches[0] let diffX = touch.clientX - touchPoint // 通過(guò)當(dāng)前位置與初始位置之差計(jì)算改變的距離 let btnLeftStyle = btnLeft + diffX // 為按鈕定義新的left值 touch.target.style.left = btnLeftStyle + px  progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + % // 通過(guò)按鈕的left值與進(jìn)度條容器長(zhǎng)度的比值，計(jì)算進(jìn)度條的長(zhǎng)度百分比})
通過(guò)一系列的邏輯運(yùn)算，我們的進(jìn)度條已經(jīng)基本實(shí)現(xiàn)了，但是發(fā)現(xiàn)了一個(gè)問(wèn)題，當(dāng)觸摸位置超出進(jìn)度條容器時(shí)，會(huì)產(chǎn)生bug，我們?cè)賮?lái)做一些限制
if (btnLeftStyle progressWrapperWidth) { btnLeftStyle = progressWrapperWidth } else if (btnLeftStyle 0) { btnLeftStyle = 0}
至此，一個(gè)簡(jiǎn)單的移動(dòng)端滾動(dòng)條就實(shí)現(xiàn)了
相關(guān)推薦：
HTML5 video視頻字幕的使用和制作方法
HTML5中audio與video標(biāo)簽的使用

以上就是HTML5觸摸事件實(shí)現(xiàn)移動(dòng)端簡(jiǎn)易進(jìn)度條的實(shí)現(xiàn)方法的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。