前言

 

　　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的布局

 

　　CSS部分此处省略

 

　　获取dom元素，并初始化触摸起点和按钮离容器最左方的距离

 

　　监听touchstart事件

 

　　监听touchmove事件

 

　　通过一系列的逻辑运算，我们的进度条已经基本实现了，但是发现了一个问题，当触摸位置超出进度条容器时，会产生bug，我们再来做一些限制

 

　　至此，一个简单的移动端滚动条就实现了

 

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

 

　　支持离线 Web 应用开发是 HTML5 的另一个重点。所谓离线 Web 应用，就是在设备不能上网的情况下仍然可以运行的应用。

 

　　开发离线Web 应用需要几个步骤。首先是确保应用知道设备是否能上网，以便下一步执行正确的操作。然后，应用还必须能访问一定的资源（图像、Javascript、CSS等），只有这样才能正常工作。最好，必须有一块本地空间用户保存数据，无论能否上网都不妨碍读写。

 

　　HTML5 及其相关的 API让开发离线应用成为现实。

 

　　离线检测

 

　　要知道设备是否在线还是离线，HTML5 定义了一个 navigator.onLine 属性，这个属性值为 true 表示设备能上网，值为 false 表示设备离线。

 

　　由于 navigator.onLine 存在一定的兼容性问题，因此除了 navigator.onLine 属性之外，为了更好地确定网络是否可用，HTML5 还定义了两个事件 online 和 offline。

 

　　当网络在离线和在线之间切换时在 window 对象上触发这两个事件：

 

　　在实际应用中，最好在页面加载后，最好先通过 navigator.onLine 取得初始的状态。然后通过上述两个事件来确定网络连接状态是否变化。当上述事件触发时，navigator.onLine 属性的值也会改变，不过必须要手工轮询这个属性才能检测到网络状态的变化。

 

　　应用缓存

 

　　HTML5 的应用缓存（application cache），或者简称为 appcache，是专门为开发离线 Web 应用而设计的。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： 在页面新的应用缓存下载完毕且可以通过 swapCache（） 使用时触发

 

　　cached： 在应用缓存完整可用时触发

 

　　一般来讲，这些事件会随着页面加载按上述顺序依次触发。也可以通过调用 update（） 方法手动触发上述事件。