移动端基础知识

触屏事件

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
常见的触屏事件：

触摸事件对象（TouchEvent）

TouchEvent 是一类描述手指在触摸平面的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少……
常见的对象：

touches：正在触摸屏幕的所有手指的列表 ；targetTouches：正在触摸当前DOM元素的手指列表，如果侦听的是一个DOM元素，他们两个是一样的；changedTouches：手指状态发生了改变的列表 从无到有 或者 从有到无。

因为我们一般都是触摸元素 所以最经常使用的是 targetTouches。当我们手指离开屏幕的时候，就没有了 touches 和 targetTouches 列表，但是会有 changedTouches。

var div = document.querySelector('div');
div.addEventListener('touchstart', function(e) {
    console.log(e);
});
1
2
3
4

移动端拖动元素

var div = document.querySelector('div');
var startX = 0; //获取手指初始坐标
var startY = 0;
var x = 0; //获得盒子原来的位置
var y = 0;
div.addEventListener('touchstart', function(e) {
  //触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置
  startX = e.targetTouches[0].pageX;
  startY = e.targetTouches[0].pageY;
  x = this.offsetLeft;
  y = this.offsetTop;
});

div.addEventListener('touchmove', function(e) {
  //移动手指 touchmove：  计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标
  var moveX = e.targetTouches[0].pageX - startX;
  var moveY = e.targetTouches[0].pageY - startY;
  // 移动盒子 盒子原来的位置 + 手指移动的距离
  this.style.left = x + moveX + 'px';
  this.style.top = y + moveY + 'px';
  e.preventDefault(); // 手指移动也会触发滚动屏幕所以这里要阻止屏幕滚动的默认行为
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

移动端常见特效

click 延时解决方案

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。
解决方案：
1.禁用缩放：浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟。

<meta name="viewport" content="user-scalable=no">
1

2.封装touch事件：当我们手指触摸屏幕，记录当前触摸时间;当我们手指离开屏幕， 用离开的时间减去触摸的时间;如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击。
3.使用插件： fastclick 插件解决 300ms 延迟。

//封装tap，解决click 300ms 延时
function tap (obj, callback) {
  var isMove = false;
  var startTime = 0; // 记录触摸时候的时间变量
  obj.addEventListener('touchstart', function (e) {
    startTime = Date.now(); // 记录触摸时间
  });
  obj.addEventListener('touchmove', function (e) {
    isMove = true;  // 看看是否有滑动，有滑动算拖拽，不算点击
  });
  obj.addEventListener('touchend', function (e) {
    if (!isMove && (Date.now() - startTime) < 150) {  // 如果手指触摸和离开时间小于150ms 算点击
      callback && callback(); // 执行回调函数
    }
    isMove = false;  //  取反 重置
    startTime = 0;
  });
}
//调用  
tap(div, function(){   // 执行代码  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

移动端常用插件

swipper：https://www.swiper.com.cn/
superslide： http://www.superslide2.com/
iscroll： https://github.com/cubiq/iscroll