02-移动web开发

一、移动端touch事件

• 当用户手指放在移动设备在屏幕上滑动会触发的touch事件

  - touchstart: 当手指触碰屏幕时候发生(不管当前有多少只手指)
  - touchmove: 当手指在屏幕上滑动时连续触发
  - touchend: 当手指离开屏幕时触发

• touch事件包含三个触摸列表(实现多点触控)

  - touches：当前位于屏幕上的所有手指的列表
      event.touches[0].clientX
  - targetTouches：位于当前DOM元素上的手指列表
  - changedTouches ： 涉及当前事件手指的列表
      event.touches[0].clientX

• 触摸点包含触摸信息(常用)

  - clientX：触摸目标在视口中的x坐标
  - clientY：触摸目标在视口中的y坐标
  - identifier：标识触摸的唯一ID
  - pageX：触摸目标在页面中的x坐标
  - pageY：触摸目标在页面中的y坐标
  - screenX：触摸目标在屏幕中的x坐标
  - screenY：触摸目标在屏幕中的y坐标
  - target：触目的DOM节点目标

• 移动端click屏幕产生200-300 ms的延迟响应
  移动浏览器为什么会设置300毫秒的等待时间呢？这与双击缩放的方案有关。平时我们有可能已经注意到了，双击缩放，即用手指在屏幕上快速点击两次，可以看到内容或者图片放大，再次双击，浏览器会将网页缩放至原始比例。
  浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。

移动端click事件和PC端的click是完全不一样的的!!!

二、SwiperJS

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端,Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果;