JS Touch events, touch the screen when the JS event

Source: Internet
Author: User

 ya, finally found JS on the tablet computer event!!!  JS event on iphone, ipod Touch, ipad touch screen1. Introduction to Touch EventsThe Web page mouse on the PC generates onmousedown, onmouseup, onmouseout, onmouseover, onmousemove events, but on mobile devices such as iphone, ipod Touch, The Ontouchstart, Ontouchmove, Ontouchend, Ontouchcancel events are generated when the Web page on the ipad touches the screen, corresponding to the touch screen start, drag and finish, and the touch screen event and cancellation. When the finger is pressed, the ontouchstart is triggered, the ontouchmove is triggered when the finger is moved, and the ontouchend is triggered when the finger is removed. When some higher-level events occur (such as phone access or pop-up messages), the current touch operation is triggered, triggering ontouchcancel. The game, archive, and so on are usually paused during ontouchcancel.2. The relationship between touch events and mouse eventsAfter the touch screen operation, the moment the finger is lifted (i.e. after ontouchend), the system will determine whether the content of the element receiving the event has been changed, if the content is changed, the next event will not be triggered, if not changed, will follow the Mousedown,mouseup, The Click order triggers the event. In particular, the Mouseout event of the previous event is triggered only if a touch-screen event is triggered again.3. Gesture EventsGesture events, including finger tapping (click), Flick (flick), double-click (double-click), Finger separation, closing (scale), turning (rotate), everything the finger can do on the screen, It is triggered only when there are two or more fingers on the screen, and the event handler is given a gestureevent type parameter that contains information about the scale of the finger (the proportion that is separated during the two movement) and the rotation (the angle of rotation between two fingers). This event is a higher-level package for the touch event, and as with touch, it also includes Gesturestart,gesturechange,gestureend.gesture Event triggering process:Step 1, the first finger down, trigger Touchstartstep 2, the second finger down, trigger gesturestartstep 3, trigger the second finger Touchstartstep 4, immediately trigger Gesturechangestep 5, The finger moves, continuously triggers the gesturechange, just like the mouse moves on the screen the time to keep triggering mousemove the same step 6, the second finger lift, triggers the gestureend, will not trigger Gesturechangestep 7, Trigger the touchendstep of the second finger 8, trigger touchstart! Note that multiple fingers on the screen, lifting a root, will refresh the global touch! Re-trigger the first finger of the Touchstartstep 9, lift the first finger, trigger touchend another on the W3school see can judge the platform: function checkstation () {var info = Navigator.useragent;if (Info.indexof ("IPod")!=-1 | | info.indexof ("iPad")!=-1 | | info.indexof ("iPhone")!=-1 | | Info.indexof ("Android")!=-1) {alert ("flat"); return true;} Else{alert ("Computer"); return false;}}

JS Touch events, touch the screen when the JS event

Related Article

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.