JavaScript Touch Events

Using HTML5 to develop a company's internal application in the near time, and touch events must be necessary in the mobile application, just beginning to think that mobile devices may also support mouse events, originally is not supported, fortunately, the WebKit core mobile browser support touch events, and packaged into the app is no pressure. Originally thought that the touch event should be the same as the mouse event, although the practice process is not difficult, but still encountered a lot of pits, only to find a slightly different.

 $ (document). Bind (touchevents.touchstart, function  (event)  {             event.preventdefault ();                     });         $ (document). Bind (touchevents.touchmove, function  (event)  {             event.preventdefault ();                     });         $ (document). Bind (touchevents.touchend, function  (event)  {            event.preventdefault ();                      }); 

Many of the three events that blog post call touch have Targettouches,touches and changetouches object lists, but in fact, there should be only one changetouches touch instance list in the Touchend event, And here is a description, the event of the callback function is just an ordinary object object, Originalevent the property, which is the real touch event , there is an appeal to the three Touch instance list, three instances that store the location of touch events and so on, similar to mouse events. Other places are basically consistent with mouse events. A brief introduction to these three touch lists, touches is a list of all the fingers on the screen, targettouches is the list of fingers on the current DOM, so when the finger moves off the trigger Touchend event, Event.originalevent does not have this targettouches list, and the Changetouches list is a list of the current events, such as the Touchend event in which the finger is moved away. Next talk about the adaptation of PC and mobile, since the use of HTML5, of course, the cross-platform features, not only to iOS and Android adaptation, directly on the PC to open the Web page is also possible, but the PC only support mouse events how to do. Good, carefully observe the above code touch event, TOUCHEVENTS.TOUCHXXX, see the following code:

var touchevents = {        touchstart:  "Touchstart ",        touchmove: " Touchmove ",         touchend:  "Touchend",        /**          *  @desc: Determine if PC device, if PC, need to change touch event for mouse event, otherwise default touching event           */        inittouchevents:  function  ()  {            if  ( IsPC ())  {                 this.touchstart =  "MouseDown";                 this.touchmove =  "MouseMove";                 this.touchend =  "MouseUp";             }        }    };

If on the PC, then the use of mouse events, in the mobile device, the use of touch events, it is so simple, to determine whether the PC is also very convenient, do not long explain.

Note: Event.originalevent seems to be in jquery, native JS direct event.touches, event.targettouches or event.changedtouches on the line

JavaScript Touch Events