The first part of the code example:
<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>
<body>
<p id= "Main1" > Please click on the document. A message box prompts you for the x and y coordinates of the mouse pointer. </p>
</body>
The second part of the code example: moving left and right sliding page switch test code
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 Mobile-Touch events: Touchstart, Touchend, Touchmove
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
