Use HTML and JavaScript (JS) to calculate the finger slide direction of a touchscreen phone demo

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.