H5移动端触摸事件：touchstart、touchend、touchmove

第一部分代码事例：

请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。

 

 

第二部分代码事例：移动端左右滑动页面切换测试代码

document.querySelector(".page2").addEventListener("touchstart", function (e1) {
e1.preventDefault();
console.log(e1)
var touch1 = e1.touches[0];
var startX = touch1.pageX;
document.querySelector(".page2").addEventListener("touchmove", function (e2) {
e2.stopPropagation();
var touch2 = e2.touches[0];
var Xc = touch2.pageX - startX;
document.querySelector(".page2").addEventListener("touchend", function (e3) {
e3.preventDefault();
if (Xc > 40) {
$(".page2").animate({
left: "640px",
width:"0px"
}, 400);
$(".page3").show();
$(".now-check").addClass("chRotate");
clearTimeout(timer1);
}
})
})
})

转载于:https://www.cnblogs.com/pengchengzhong/p/5997576.html