事件概述
touch事件即触摸事件，会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。一共有四个触摸事件
touchstart: 当手指触摸屏幕时触发(手指数量不限)
touchmove: 当手指在屏幕上滑动时连续地触发(事件发生期间，调用preventDefault()可以阻止滚动)
touchend: 当手指从屏幕上移开时触发
touchcancel: 当系统停止跟踪触摸时触发(不常用)
<div id="test" style="200px;height: 200px;background: teal;"></div>
<script>
(function() {
var stateMap = {
touchstartCount: 0,
touchmoveCount: 0,
touchendCount: 0
};
test.addEventListener('touchstart', function(event) {
this.innerHTML = 'touchstart:' + (++stateMap.touchstartCount)
});
test.addEventListener('touchmove', function(event) {
this.innerHTML = 'touchmove:' + (++stateMap.touchmoveCount)
});
test.addEventListener('touchend', function(event) {
this.innerHTML = 'touchend:' + (++stateMap.touchendCount)
});
})();
</script>
事件延迟
touch事件延迟是指触发touch事件与它的功能执行之间有300毫秒的间隔。其实，鼠标事件、焦点事件、浏览器默认行为也都存在着300ms的延迟
点击穿透
我们在做移动端开发时，经常会用到mask遮罩层，常见的效果是点击遮罩层可以关闭它。如果网页中有一个超链接，链接外层是那层遮罩层，点击链接区域，不仅会关闭遮罩层，300ms后，还会触发链接的点击事件，这就是点击穿透。
之所以出现这种情况，是因为点击页面后，浏览器会记录所点击的页面坐标，300ms后，会找到坐标对应的元素，然后触发点击行为
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
padding: 0;
margin: 0;
}
.mask {
position: fixed;
top: 0;
left: 0;
100%;
height: 100%;
background: rgba(0,0,0,.5);
}
</style>
</head>
<body>
<a href="https://baidu.com">百度</a>
<div id="test" class="mask"></div>
<script>
(function () {
test.addEventListener('touchstart', function(event){
this.style.display = 'none';
});
})();
</script>
</body>
</html>
解决这种问题的常见方法是，在touch事件的事件处理程序中增加300ms的延迟
(function () {
test.addEventListener('touchstart', function(event){
var self = this;
setTimeout(function(){
self.style.display = 'none';
},300)
});
})();
事件对象
每个触摸事件的event对象都提供了类似鼠标事件中常见的属性
(function () {
test.addEventListener('touchstart', function (e) {
console.log(e)
});
})();
1、currentTarget 属性返回事件正在执行的监听函数所绑定的节点
2、target 属性返回事件的实际目标节点
3、srcElement 属性与target属性功能一致
4、eventPhase 属性返回一个整数值，表示事件目前所处的事件流阶段。0表示事件没有发生，1表示捕获阶段，2表示目标阶段，3表示冒泡阶段
5、bubbles 属性返回一个布尔值，表示当前事件是否会冒泡。该属性为只读属性
6、cancelable 属性返回一个布尔值，表示事件是否可以取消。该属性为只读属性
touchList
触摸事件对象有一个touchList数组属性，其中包含了每个触摸点的信息。如果用户使用四个手指触摸屏幕，这个数组就会有四个元素。一共有三个这样的数组
touches： 当前触摸屏幕的触摸点数组
changedTouches： 导致触摸事件被触发的触摸点数组
targetTouches： 事件目标元素上的触摸点数组
(function () {
test.addEventListener('touchstart', function (e) {
console.log(e.touches)
console.log(e.changedTouches)
console.log(e.targetTouches)
});
test.addEventListener('touchend', function (e) {
console.log(e.touches)
console.log(e.changedTouches)
console.log(e.targetTouches)
});
})();
这三个属性中最常用的是changedTouches，当元素触发了touchend事件，只有changedTouches数组包含被触发的元素
事件坐标
上面的这些触摸点数组中，包含了触摸点的位置信息，每个Touch对象都包含下列属性
clientx: 触摸目标在视口中的x坐标
clientY: 触摸目标在视口中的y坐标
identifier: 标识触摸的唯一ID
pageX: 触摸目标在页面中的x坐标（包含滚动）
pageY: 触摸目标在页面中的y坐标（包含滚动）
screenX: 触摸目标在屏幕中的x坐标
screenY: 触摸目标在屏幕中的y坐标
target: 触摸的DOM节点目标
(function () {
test.addEventListener('touchstart', function (e) {
console.log(e.changedTouches)
});
})();
changedTouches数组中的第一个元素就是导致事件触发的那个触摸点对象