H5移动端触摸事件：touchstarttouchendtouchmove
Posted 成忠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5移动端触摸事件：touchstarttouchendtouchmove相关的知识，希望对你有一定的参考价值。
第一部分代码事例：
<html>
<head>
<meta charset="utf-8">
<style>
#main,#main1{
width:500px;
height:500px;
border:1px solid red;
}
</style>
<script type="text/javascript">
function load (){
var oInp = document.getElementById("main1");
oInp.addEventListener(‘touchstart‘,touch, false);
oInp.addEventListener(‘touchmove‘,touch, false);
oInp.addEventListener(‘touchend‘,touch, false);
function touch (event){
var event = event || window.event;
switch(event.type){
case "touchstart":
oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
oInp.innerHTML = "<br/>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML = "<br/>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
}
}
}
window.addEventListener(‘load‘,load, false);
</script>
</head>
<body>
<p id="main1">请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
</body>
</html>
第二部分代码事例：移动端左右滑动页面切换测试代码
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);
}
})
})
})
以上是关于H5移动端触摸事件：touchstarttouchendtouchmove的主要内容，如果未能解决你的问题，请参考以下文章