Touch对象表示在触控设备上的触摸点,通常是指手指在触屏设备或者触摸板上的操作,在用户手机在屏幕上滑动时就会实时的触发touch事件
touchstart
当用户手指放到屏幕上触发touchmove
当用户手指在屏幕上移动时触发touchend
当用户手指从屏幕上离开时触发
当我们在移动端触发触屏事件时运动变量e会返回一个TouchEvent对象,在该对象中包含几个我们需要的关键信息
- touches:当前屏幕上所有手指触摸点的列表
- targetTouches:当前对象上所有触摸点的列表
- changedTouches:涉及引发当前事件的所有触摸点的列表
我们一般使用changeTouch来获取当前手指的相对位置
clientX:14.474000930786133
clientY:113.15800476074219
force:1
identifier:0
pageX:14.474000930786133
pageY:113.15800476074219
radiusX:15.131579399108887
radiusY:15.131579399108887
rotationAngle:0
screenX:181
screenY:244
target:li
在移动端我们会使用touch事件来替代mouse事件,并且在移动端的click事件有300ms的延迟,这有时可能会造成用户感觉反应迟缓,所有有时我们需要使用touch事件来替代click事件
var webClick = function (ele, callback) {
if (ele && typeof ele == 'object') {
var isMove = true,
startTime,
endTime;
ele.addEventListener("touchstart", function () {
startTime = Date.now()
})
ele.addEventListener("touchmove", function () {
isMove = true;
})
ele.addEventListener("touchend", function () {
endTime = Date.now();
if (!isMove && endTime - startTime < 150) {
callback && callback();
}
isMove = false;
})
}
}
同样我们可以使用上面的代码来监听用户长按事件,只需要判断用户手指在屏幕的停留时间即可