HTML5觸摸事件實現(xiàn)移動端簡易進度條的實現(xiàn)方法

1、html5觸摸事件實現(xiàn)移動端簡易進度條的實現(xiàn)方法前言html中新添加了許多新的大事，但因為兼容性的問題，許多大事都沒有廣泛的應(yīng)用，接下來為大家介紹一些好用的移動端觸摸大事： touchstart、touchmove、touchend。介紹下面我們來容易介紹一下這幾個大事：touchstart： 當手指觸摸屏幕時候觸發(fā)，即使已經(jīng)有一個手指放在屏幕上也會觸發(fā)。touchmove：當手指在屏幕上滑動的時候延續(xù)地觸發(fā)。在這個大事發(fā)生期間，調(diào)用preventdefault（）大事可以阻擋滾動。touchend：當手指從屏幕上離開的時候觸發(fā)。這些觸摸大事具有頻繁的dom屬性。此外，他們還包含著三個用于跟蹤

2、觸摸的屬性：touches：表示當前跟蹤的觸摸操作的touch對象的數(shù)組。targettouches：特定于大事目標的touch對象的數(shù)組。changetouches：表示自上次觸摸以來發(fā)生了什么轉(zhuǎn)變的touch對象的數(shù)組。每個touch對象包含的屬性如下：clientx：觸摸目標在視口中的x坐標。clienty：觸摸目標在視口中的y坐標。pagex：觸摸目標在頁面中的x坐標。pagey：觸摸目標在頁面中的y坐標。screenx：screenx：觸摸目標在屏幕中的x坐標。screeny：screenx：觸摸目標在屏幕中的x坐標。identifier：標識觸摸的唯一id。target：scree

3、nx：觸摸目標在屏幕中的x坐標。了解了觸摸大事的特征，那就開頭緊急刺激的實戰(zhàn)環(huán)節(jié)吧實戰(zhàn)下面我們來通過用法觸摸大事來實現(xiàn)一個移動端可滑動的進度條我們先舉行html的布局css部分此處省略獵取dom元素，并初始化觸摸起點和按鈕離容器最左方的距離監(jiān)聽touchstart大事監(jiān)聽touchmove大事通過一系列的規(guī)律運算，我們的進度條已經(jīng)基本實現(xiàn)了，但是發(fā)覺了一個問題，當觸摸位置超出進度條容器時，會產(chǎn)生bug，我們再來做一些限制至此，一個容易的移動端滾動條就實現(xiàn)了以上就是本文的所有內(nèi)容，希翼對大家的學(xué)習(xí)有所協(xié)助，也希翼大家多多支持。支持離線 web 應(yīng)用開發(fā)是 html5 的另一個重點。所謂離線 we

4、b 應(yīng)用，就是在設(shè)備不能上網(wǎng)的狀況下仍然可以運行的應(yīng)用。開發(fā)離線web 應(yīng)用需要幾個步驟。首先是確保應(yīng)用知道設(shè)備是否能上網(wǎng)，以便下一步執(zhí)行正確的操作。然后，應(yīng)用還必需能拜訪一定的資源（圖像、javascript、css等），惟獨這樣才干正常工作。最好，必需有一塊本地空間用戶保存數(shù)據(jù)，無論能否上網(wǎng)都不阻礙讀寫。html5 及其相關(guān)的 api讓開發(fā)離線應(yīng)用成為現(xiàn)實。離線檢測要知道設(shè)備是否在線還是離線，html5 定義了一個 navigator.online 屬性，這個屬性值為 true 表示設(shè)備能上網(wǎng)，值為 false 表示設(shè)備離線。因為 navigator.online 存在一定的兼容性問題，因

5、此除了 navigator.online 屬性之外，為了更好地確定網(wǎng)絡(luò)是否可用，html5 還定義了兩個大事 online 和 offline。當網(wǎng)絡(luò)在離線和在線之間切換時在 window 對象上觸發(fā)這兩個大事：在實際應(yīng)用中，最好在頁面加載后，最好先通過 navigator.online 取得初始的狀態(tài)。然后通過上述兩個大事來確定網(wǎng)絡(luò)銜接狀態(tài)是否變幻。當上述大事觸發(fā)時，navigator.online 屬性的值也會轉(zhuǎn)變，不過必需要手工輪詢這個屬性才干檢測到網(wǎng)絡(luò)狀態(tài)的變幻。應(yīng)用緩存html5 的應(yīng)用緩存（application cache），或者簡稱為 appcache，是特地為開發(fā)離線 web

6、 應(yīng)用而設(shè)計的。appcache 就是從掃瞄器的緩存中分出來的一塊緩存區(qū)。要想在這個緩存中保存數(shù)據(jù)，可以用法一個描述文件（manifest file），列出要下載和緩存的資源。描述文件示例：然后在 html 中引用：xxx.manifest 文件的 mime 類型必需是 text/cache-manifest。該 api 的核心是 applicationcache 對象，這個對象有一個 status 屬性，屬性的值是常量，表示應(yīng)用緩存的如下當前狀態(tài)：0： 無緩存，即沒有與頁面相關(guān)的應(yīng)用緩存1： 閑置，即應(yīng)用緩存未得到更新2： 檢查中，即正在下載描述文件并檢查更新3： 下載中，即應(yīng)用緩存正在下載描述文件中指定的資源4： 更新完成，即應(yīng)用緩存已經(jīng)更新了資源，而且全部資源都已下載完畢，可以通過 swapcache（） 來用法了5： 廢棄，即應(yīng)用緩存的描述文件已經(jīng)不存在了，因此頁面無法再拜訪應(yīng)用緩存相關(guān)大事：checking： 在掃瞄器為應(yīng)用緩存查找更新時觸發(fā)error： 在檢查更新或者下載資源期間發(fā)生錯誤時觸發(fā)noupdate： 在檢查描述文件發(fā)覺文件無變幻時觸發(fā)downloading： 在開頭下載應(yīng)用緩存資源時觸發(fā)progress： 在文件下載應(yīng)用緩存的過程中持續(xù)不斷地觸發(fā)updateready： 在頁面新的應(yīng)用緩存下載完畢且