H5 touch事件处理

H5 开发中对touch事件的处理

export function handleTouch(element, callback, left, right) {var startX, startY, startT, isMove, isTouchEnd, deltaX, direction, pageWidth = document.body.clientWidthelement.addEventListener("touchstart", function (e) {// e.preventDefault()// 单手指触摸或者多手指同时触摸，禁止第二个手指延迟操作事件if (e.touches.length === 1 || isTouchEnd) {var touch = e.touches[0]startX = touch.pageXstartY = touch.pageYstartT = +new Date() // 记录手指按下的开始时间isMove = false // 是否产生滑动isTouchEnd = false // 当前滑动开始}element.addEventListener("touchmove", function (e) {// e.preventDefault()// 如果当前滑动已结束，不管其他手指是否在屏幕上都禁止该事件if (isTouchEnd) returnvar touch = e.touches[0]deltaX = touch.pageX - startX;var deltaY = touch.pageY - startY;isMove = truedirection = deltaX > 0 ? "right" : "left";// 判断手指滑动的方向})})element.addEventListener("touchend", function (e) {// e.preventDefault()var deltaT = +new Date() - startT; // 计算手指在屏幕上停留的时间if (isMove && !isTouchEnd) {// 发生了滑动，并且当前滑动事件未结束isTouchEnd = true // 标记当前完整的滑动事件已经结束// if (deltaT < 300) {//   // 如果停留时间小于300ms,则认为是快速滑动，无论滑动距离是多少，都执行操作//   console.log('停留时间小于300ms', deltaX, pageWidth)//   direction === "left"//     ? callback(left)//     : callback(right)// } else {// 如果滑动距离小于屏幕的20%，则不切换if (Math.abs(deltaX) / pageWidth < 0.20) {} else {console.log('滑动距离大于屏幕的20%', deltaX, pageWidth)direction === "left"? callback(left): callback(right)}}// }})
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！