<!--HTML5--><! DOCTYPE html>"GBK">"version"style="border:2px Solid Black;background-color:yellow"></div><br/><br/><br/><br/><br/><br/><div id="result"style="border:2px solid red; color:red;"> No event triggered! </div><div id="Test"style="border:2px Solid Red"> <ul> <li id="Li1"> Test Entry 1</li> <li id="Li2"> Test Entry 2</li> <li id="Li3"> Test Entry 3</li> <li id="Li4"> Test Entry 4</li> <li id="li5"> Test Entry 5</li> <li id="Li6"> Test Entry 6</li> <li id="Li7"> Test Entry 7</li> <li id="Li8"> Test Entry 8</li> <li id="Li9"> Test Entry 9</li> <li id="li10"> Test Entry 10</li> <li id="li11"> Test Entry 11</li> <li id="li12"> Test Entry 12</li> <li id="li13"> Test Entry 13</li> <li id="li14"> Test Entry 14</li> <li id="li15"> Test Entry 15</li> <li id="li16"> Test Entry 16</li> <li id="li17"> Test Entry 17</li> <li id="li18"> Test Entry 18</li> <li id="li19"> Test Entry 19</li> <li id="li20"> Test Entry 20</li> </ul></div><script type="Text/javascript">//global variable, touch start position varStartX =0, Starty =0; //Touchstart Eventsfunction Touchsatrtfunc (evt) {Try { //Evt.preventdefault ();//Browser zoom, scroll bar scrolling, and so on when blocking touch varTouch = evt.touches[0];//get the first touch point varx = number (Touch.pagex);//page contact X coordinate vary = number (touch.pagey);//page Contact Y coordinate//Record Contact initial positionStartX =x; Starty=y; varText ='Touchstart Event Trigger: ('+ x +', '+ y +')'; document.getElementById ("result"). InnerHTML =text; } Catch(e) {alert ('Touchsatrtfunc:'+e.message); } } //Touchmove Event, this event cannot get coordinatesfunction Touchmovefunc (evt) {Try { //Evt.preventdefault ();//Browser zoom, scroll bar scrolling, and so on when blocking touch varTouch = evt.touches[0];//get the first touch point varx = number (Touch.pagex);//page contact X coordinate vary = number (touch.pagey);//page Contact Y coordinate varText ='Touchmove Event Trigger: ('+ x +', '+ y +')'; //judging the sliding direction if(X-startx! =0) {text+='<br/> Swipe left and right'; } if(Y-starty! =0) {text+='<br/> swipe up and down'; } document.getElementById ("result"). InnerHTML =text; } Catch(e) {alert ('Touchmovefunc:'+e.message); } } //Touchend Eventsfunction Touchendfunc (evt) {Try { //Evt.preventdefault ();//Browser zoom, scroll bar scrolling, and so on when blocking touch varText ='Touchend Event Triggering'; document.getElementById ("result"). InnerHTML =text; } Catch(e) {alert ('Touchendfunc:'+e.message); } } //Binding Eventsfunction Bindevent () {Document.addeventlistener ('Touchstart', Touchsatrtfunc,false); Document.addeventlistener ('Touchmove', Touchmovefunc,false); Document.addeventlistener ('Touchend', Touchendfunc,false); } //determine if touch events are supportedfunction Istouchdevice () {document.getElementById ("version"). InnerHTML =navigator.appversion; Try{document.createevent ("TouchEvent"); Alert ("Support TouchEvent Event! "); Bindevent (); //Binding Events } Catch(e) {alert ("touchevent events are not supported! "+e.message); }} window.onload=Istouchdevice;</script></body>Touch event Move-side touching event