移动端
一、定义
触摸事件类型
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();
});
网友评论