移动端触摸事件

移动端

一、定义

触摸事件类型

touchstart：手指触摸到一个 DOM 元素时触发。
touchmove：手指在一个 DOM 元素上滑动时触发。
touchend：手指从一个 DOM 元素上移开时触发。
touchcancel 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。

二、接口

TouchEvent

TouchEvent的属性继承了 UIEvent 和 Event。
其中三个主要属性：
TouchEvent.changedTouches：一个 TouchList对象，包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 Touch对象。

TouchEvent.targetTouches： 一个 TouchList 对象，是包含了如下触点的 Touch 对象：触摸起始于当前事件的目标 element 上，并且仍然没有离开触摸平面的触点。

TouchEvent.touches： 一 个 TouchList 对象，包含了所有当前接触触摸平面的触点的 Touch 对象，无论它们的起始于哪个 element 上，也无论它们状态是否发生了变化。

TouchList

一个TouchList代表一个触摸屏幕上所有触点的列表。
事件对应的三个列表包含了当前事件的一些相关信息，比如：一些坐标信息。

Touch

​Touch
1、属性

TouchList

上面就是一个 TouchList 列表。它对应的就是前面提到的三种事件（touchstart、touchmove、touchend）中的一种，在触发时生成的一个对象列表。列表里最有用的就是 Touch 对象了，Touch 对象里存放着对应事件的一些相关的信息，我们就是通过这种个事件里这些属性的结合来实现各种效果。

三、示例：

1、拖拽元素

思路：

获取按下时和选中元素的坐标。获取相对于元素偏移的位置。根据当前的按下的位置减去元素偏移的位置。得到元素拖拽后的位置。在利用CSS定位和left、top属性实现滑动的效果。

var moveElem = document.querySelector('.move'); //待拖拽元素      
var dragging; //是否激活拖拽状态
var tLeft, tTop;
moveElem.addEventListener("touchstart", function (e) {
      dragging = true;
      var moveElemRect = moveElem.getBoundingClientRect();
      tLeft = e.touches[0].pageX - moveElemRect.left; //按下时和选中元素的坐标偏移:x坐标
      tTop = e.touches[0].pageY - moveElemRect.top; //按下时和选中元素的坐标偏移:y坐标
});
moveElem.addEventListener('touchmove', function(e) {
      if (dragging) {
          var moveX = e.touches[0].pageX - tLeft, 
                moveY = e.touches[0].pageY - tTop;
          moveElem.style.left = moveX + 'px';
          moveElem.style.top = moveY + 'px';
      }
});
moveElem.addEventListener('touchend', function(e) {
      dragging = false;
});

getBoundingClientRect:Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

2、长按

思路：

在touchstart中开启一个定时器，比如在700ms后显示一个长按菜单
在touchend中清除这个定时器，这样如果按下的时间超过700ms，那么长按菜单已经显示出来了，清除定时器不会有任何影响；如果按下的时间小于700ms，那么touchstart中的长按菜单还没来得及显示出来，就被清除了。

label.addEventListener('touchstart', function () {
      startTime = +new Date()
      timer = setTimeout(function () {
          // 处理长按
      }, 700)
 })
label.addEventListener('touchend', function () {
      endTime = +new Date()
      clearTimeout(timer)
      if (endTime - startTime < 700) {
          // 处理点击事件
      }
 });

3、两指放大缩小操作

思路：

计算一开始两指放在屏幕上时之间的距离x。在两指滑动时，再计算两指之间的距离y。x/y=缩放的比例。

实现

默认事件

在移动端手指操作时会默认触发一些行为，比如：滚动，缩放。上面的例子由于没有阻止触摸事件的默认行为导致的。所以当你测试上面例子时，页面很容易发生缩放行为，影响到测试效果。想阻止触摸事件的默认行为非常地简单，只需要添加如下代码就可以了：

document.addEventListener("touchstart", function (e) {
    e.preventDefault();
});