JS 移动端的 Touch 事件使用-木庄网络博客

本文摘自PHP中文网，作者Guanhui，侵删。

随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页，我们平时在pc浏览器上用的鼠标事件，比如：click, mouseover等，已经无法满足移动设备触摸屏的特点，触摸时代的到来，离不开那些触摸事件。

触摸事件包含4个接口。

TouchEvent

代表当触摸行为在平面上变化的时候发生的事件.

Touch

代表用户手指与触摸平面间的一个接触点.

TouchList

代表一系列的Touch; 一般在用户多个手指同时接触触控平面时使用这个接口.

DocumentTouch

包含了一些创建 Touch对象与TouchList对象的便捷方法.

（参考于 https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events ）

TouchEvent接口可以响应基本触摸事件（如单个手指点击），它包含了一些具体的事件，

事件类型：

touchstart : 触摸开始（手指放在触摸屏上）

touchmove : 拖动（手指在触摸屏上移动）

touchend : 触摸结束（手指从触摸屏上移开）

touchenter ：移动的手指进入一个dom元素。

touchleave ：移动的手指离开一个dom元素。

还有一个touchcancel，是在拖动中断时候触发。

事件属性：

altKey : 该属性返回一个布尔值，表示在指定的事件发生时，Alt 键是否处于按下状态， event.altKey=true|false|1|0

type : 触摸时触发的事件类型，比如touchstart

每个触摸事件都包括了三个触摸属性列表：

1. touches：当前位于屏幕上的所有手指触摸点的一个列表。

2. targetTouches：当前元素对象上所有触摸点的列表。

3. changedTouches：涉及当前事件的触摸点的列表。

它们都是一个数组，每个元素代表一个触摸点。

每个触摸点对应的Touch都有三对重要的属性，clientX/clientY、pageX/pageY、screenX/screenY。

其中screenX/screenY代表事件发生的位置对于屏幕的偏移量，clientX/clienYt和pageX/pageY都代表事件发生位置对应对象的偏移量，不过区别是clientX/clientY不包括对象滚动而隐藏的偏移量，而pageX/pageY包括对象滚动而隐藏的偏移量。移开屏幕的那个触摸点，只会包含在changedTouches列表中，而不会包含在touches 和targetTouches 列表中，所以changedTouches在项目当中会比较常用。

示例：

<body onload="start();">
<style type="text/css">
#dom {
  width:500px;
  height:500px;
  background:black;
}
</style>
<div id="dom"></div>
<script type="text/javascript">
function onTouchStart(e){
    console.log(e);
}
function start(){
    var dom = document.getElementById('dom');
    dom.addEventListener('touchstart', onTouchStart, false);
}
</script>
</body>

控制台输出如下：

微信截图_20200521092604.png

触摸事件跟鼠标事件的触发先后顺序：

Touchstart > toucheend > mousemove > mousedown > mouseup > click

很多情况下触摸事件跟鼠标事件会同时触发（目的是为了让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作），如果使用了触摸事件，可以调用event.preventDefault()来阻止鼠标事件被触发。而手指在屏幕上移动touchmove则不会触发鼠标事件和单击事件,在touchmove事件中加入preventDefault, 可以禁止浏览器滚动屏幕，也不会影响单击事件的触发。

微信截图_20200521092640.jpg

以上事件，都系统内置的，可以直接使用，通过这些内置事件，可以组合成很多非原生的多点触摸手势touch手势。

Hammer.js是一个轻量级的JavaScript库，能让你的网站轻松实现触控事件, 它依赖于jQuery，用来控制触摸设备上的多点触控特性。

官网： http://hammerjs.github.io/

多点触摸的实现，想了解更多可以参考： http://www.cnblogs.com/iamlilinfeng/p/4239957.htm

zepto是轻量级兼容juqery的库，适用于移动端开发, 具体使用方法，可参看官网, http://zeptojs.com/

zepto touch 是用于单点手势触发的一个touch事件模块。

Touch.js 下载地址： https://github.com/madrobby/zepto/blob/master/src/touch.js

先看zepto的touch模块实现：

$(document)
    .on('touchstart ...',function(e){
             ...
            ...
             now = Date.now()
            delta = now - (touch.last || now)
             if (delta > 0 && delta <= 250) touch.isDoubleTap = true
             touch.last = now
    })
    .on('touchmove ...', function(e){
    })
    .on('touchend ...', function(e){
           ...
           if (deltaX < 30 && deltaY < 30) {
                  var event = $.Event('tap')
                 
                  touch.el.trigger(event)
           }
    })