The popularity of mobile terminals, programmers want to complete the touch screen action through Html+js recognition. The following is a concrete example of implementation, for everyone's reference.
Copy and save the following code, mobile phone access, now the mobile browser generally support touch screen, for this demonstration is to support three JS events:
1,touchstart---Finger start touch event, this event can get the starting coordinates, the starting coordinates are saved in PRESSX and Pressy.
2, Touchmove---Mobile phone touch mobile time, as long as the phone does not leave the specified elements, will keep the new coordinates of the phone through the event to the JS code on the page. By calculating the difference between the current coordinates obtained by this event and the starting coordinates, you can know the direction of the finger movement, the four directions (top, bottom, left, right) are identified in this presentation, and interested can calculate more directions.
3, Touchend---This event is not used for the time being.
Demo address for this example: http://deanx.cn/demo/touch/touch.html
<HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><title>Touch screen Finger Slide calculation Demo--Programmer Lao Liu</title></Head><Bodystyle= "FONT-SIZE:32PX;"><Divstyle= "width:100%"><H2>Touch screen finger Slide direction calculation demo</H2><DivID= "Region"style= "background-color:yellow;width:100%;height:50%"></Div>starting coordinates<BR/><inputID= "Touchstart"style= "FONT-SIZE:48PX;"/><BR/>result Calculation<BR/><inputID= "TouchMove"style= "FONT-SIZE:48PX;"/></Div><Scripttype= "Text/javascript">/** Programmer Old Liu * function: Calculate the direction of the finger sliding on the specified label*/ vartagId= " Region"; varPRESSX= 0, Pressy= 0; varobj=document.getElementById (tagId); Obj.addeventlistener ('Touchmove', function(event) {//If there's only one finger in the position of this element , if(Event.targetTouches.length== 1) { varTouch=event.targettouches[0]; varSpanX=Touch.pagex-PRESSX; varSpany=Touch.pagey-Pressy; varDirect= "None"; if(Math.Abs (SpanX)>Math.Abs (Spany)) { //Horizontal Direction if(SpanX> 0) {Direct= " Right";//Right //Do Right function } Else{Direct= " Left";//left //Do left function } } Else { //Vertical Direction if(Spany> 0) {Direct= " Down";//downward //Do-down function } Else{Direct= " up";//Upward //Do up function } } //Place the element where the finger is locatedTouchmove.value=Direct+ "(" +SpanX+ ';' +Spany+ ")"; } }, false); Obj.addeventlistener ('Touchstart', function(event) {//If there's only one finger in the position of this element , if(Event.targetTouches.length== 1) { varTouch=event.targettouches[0]; //Place the element where the finger is locatedPRESSX=Touch.pagex; Pressy=Touch.pagey; Touchstart.value=PRESSX+ ';' +Pressy; } }, false); /*obj.addeventlistener (' Touchend ', function (event) {//If there is only one finger in the position of this element if (Event.targetTouches.len Gth = = 1) {var touch = event.targettouches[0]; Place the element where the finger is located Touchend.value=touch.pagex + '; ' + touch.pagey; }}, False); */</Script></Body></HTML>
Use HTML and JavaScript (JS) to calculate the finger swipe direction of a touchscreen phone demo
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
