HTML5触摸事件实现移动端简易进度条的实现方法

1、html5触摸事件实现移动端简易进度条的实现方法前言html中新添加了许多新的大事，但因为兼容性的问题，许多大事都没有广泛的应用，接下来为大家介绍一些好用的移动端触摸大事： touchstart、touchmove、touchend。介绍下面我们来容易介绍一下这几个大事：touchstart： 当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。touchmove：当手指在屏幕上滑动的时候延续地触发。在这个大事发生期间，调用preventdefault（）大事可以阻挡滚动。touchend：当手指从屏幕上离开的时候触发。这些触摸大事具有频繁的dom属性。此外，他们还包含着三个用于跟踪

2、触摸的属性：touches：表示当前跟踪的触摸操作的touch对象的数组。targettouches：特定于大事目标的touch对象的数组。changetouches：表示自上次触摸以来发生了什么转变的touch对象的数组。每个touch对象包含的属性如下：clientx：触摸目标在视口中的x坐标。clienty：触摸目标在视口中的y坐标。pagex：触摸目标在页面中的x坐标。pagey：触摸目标在页面中的y坐标。screenx：screenx：触摸目标在屏幕中的x坐标。screeny：screenx：触摸目标在屏幕中的x坐标。identifier：标识触摸的唯一id。target：scree

3、nx：触摸目标在屏幕中的x坐标。了解了触摸大事的特征，那就开头紧急刺激的实战环节吧实战下面我们来通过用法触摸大事来实现一个移动端可滑动的进度条我们先举行html的布局css部分此处省略猎取dom元素，并初始化触摸起点和按钮离容器最左方的距离监听touchstart大事监听touchmove大事通过一系列的规律运算，我们的进度条已经基本实现了，但是发觉了一个问题，当触摸位置超出进度条容器时，会产生bug，我们再来做一些限制至此，一个容易的移动端滚动条就实现了以上就是本文的所有内容，希翼对大家的学习有所协助，也希翼大家多多支持。支持离线 web 应用开发是 html5 的另一个重点。所谓离线 we

4、b 应用，就是在设备不能上网的状况下仍然可以运行的应用。开发离线web 应用需要几个步骤。首先是确保应用知道设备是否能上网，以便下一步执行正确的操作。然后，应用还必需能拜访一定的资源（图像、javascript、css等），惟独这样才干正常工作。最好，必需有一块本地空间用户保存数据，无论能否上网都不阻碍读写。html5 及其相关的 api让开发离线应用成为现实。离线检测要知道设备是否在线还是离线，html5 定义了一个 navigator.online 属性，这个属性值为 true 表示设备能上网，值为 false 表示设备离线。因为 navigator.online 存在一定的兼容性问题，因

5、此除了 navigator.online 属性之外，为了更好地确定网络是否可用，html5 还定义了两个大事 online 和 offline。当网络在离线和在线之间切换时在 window 对象上触发这两个大事：在实际应用中，最好在页面加载后，最好先通过 navigator.online 取得初始的状态。然后通过上述两个大事来确定网络衔接状态是否变幻。当上述大事触发时，navigator.online 属性的值也会转变，不过必需要手工轮询这个属性才干检测到网络状态的变幻。应用缓存html5 的应用缓存（application cache），或者简称为 appcache，是特地为开发离线 web

6、 应用而设计的。appcache 就是从扫瞄器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以用法一个描述文件（manifest file），列出要下载和缓存的资源。描述文件示例：然后在 html 中引用：xxx.manifest 文件的 mime 类型必需是 text/cache-manifest。该 api 的核心是 applicationcache 对象，这个对象有一个 status 属性，属性的值是常量，表示应用缓存的如下当前状态：0： 无缓存，即没有与页面相关的应用缓存1： 闲置，即应用缓存未得到更新2： 检查中，即正在下载描述文件并检查更新3： 下载中，即应用缓存正在下载描述文件中指定的资源4： 更新完成，即应用缓存已经更新了资源，而且全部资源都已下载完毕，可以通过 swapcache（） 来用法了5： 废弃，即应用缓存的描述文件已经不存在了，因此页面无法再拜访应用缓存相关大事：checking： 在扫瞄器为应用缓存查找更新时触发error： 在检查更新或者下载资源期间发生错误时触发noupdate： 在检查描述文件发觉文件无变幻时触发downloading： 在开头下载应用缓存资源时触发progress： 在文件下载应用缓存的过程中持续不断地触发updateready： 在页面新的应用缓存下载完毕且