Now that smartphones are popular, we are engaged in touch screen events. In the past, JavaScript writing could not meet some requirements. Next I will introduce you to several js Mobile Phone Touch Screen events.
Processing Touch events allows you to track the position of each finger of a user. You can bind the following four Touch events:
I,
Touchstart: // triggered when the finger is placed on the screen
Touchmove: // triggered when the finger moves on the screen
Touchend: // triggered when the finger is picked up from the screen
Touchcancel: // triggered when the system cancels the touch event. When will the system be canceled? Unknown
II,
Client/clientY: // The Position of the touch point relative to the browser window viewport
PageX/pageY: // The Position of the touch point relative to the page
ScreenX/screenY: // position of the touch point relative to the screen
Identifier:> // unique ID of the touch object
3,
Each Touch object contains the following attributes.
ClientX: Touch the X coordinate of the target in the viewport.
ClientY: Touch the Y coordinate of the target in the viewport.
Identifier: the unique ID of the touch.
PageX: Touch the x coordinate of the target in the page.
PageY: Touch the y coordinate of the target in the page.
ScreenX: Touch the x coordinate of the target in the screen.
ScreenY: Touch the y coordinate of the target in the screen.
Target: the coordinate of the DOM node to be touched.
Example
| The Code is as follows: | Copy code |
<! Doctype html> <Html> <Head> <Meta charset = "UTF-8"> <Title> touches </title> <Style> Body {font-size: 60px; color: red ;} </Style> <Script> Function touches (ev ){ If (ev. touches. length = 1 ){ Var oDiv = document. getElementById ('div1 '); Switch (ev. type ){ Case 'touchstart ': ODiv. innerHTML = 'touch start ('+ ev. touches [0]. clientX +', '+ ev. touches [0]. clientY + ')'; Ev. preventDefault (); // prevents the scroll bar from appearing. Break; Case 'touchend ': ODiv. innerHTML = 'touch end ('+ ev. changedTouches [0]. clientX +', '+ ev. changedTouches [0]. clientY + ')'; Break; Case 'touchmove ': ODiv. innerHTML = 'touch move ('+ ev. changedTouches [0]. clientX +', '+ ev. changedTouches [0]. clientY + ')'; Break; } } } Document. addEventListener ('touchstart', touches, false ); Document. addEventListener ('touchend', touches, false ); Document. addEventListener ('touchmove ', touches, false ); </Script> </Head> <Body> <Div id = "div1"> </div> </Body> </Html> |
|
2. gesture events:
Gesturestart: triggered when one finger is on the screen and the other finger is on the screen;
Gestureend: triggered when any of your fingers are removed from the screen;
Gesturechange: triggered when any finger on the touch screen changes;
In the event object, the others are the same. There are two more useful items in the gesture:
One is rotation: the rotation angle caused by finger changes. The clockwise direction is positive and the clockwise direction is negative;
There is also a scale: the distance between two fingers changes;
Example
| The Code is as follows: | Copy code |
| <! Doctype html> <Html> <Head> <Meta charset = "UTF-8"> <Title> gesture </title> <Style> Body {font-size: 60px; color: red ;} </Style> <Script> Window. onload = function (){ Function gesture (ev ){ Var div = document. getElementById ('div1 '); Switch (ev. type ){ Case 'gesturestart ': Div. innerHTML = 'gesture start (rotation = '+ ev. rotation +', scale = '+ ev. scale + ')'; Ev. preventDefault (); Break; Case 'gestureend ': Div. innerHTML = 'gesture End (rotation = '+ ev. rotation +', scale = '+ ev. scale + ')'; Break; Case 'gesturechang ': Div. innerHTML = 'gesture Change (rotation = '+ ev. rotation +', scale = '+ ev. scale + ')'; Break; } } Document. addEventListener ('gesturestart', gesture, false ); Document. addEventListener ('gestureend', gesture, false ); Document. addEventListener ('gesturechang', gesture, false ); } </Script> </Head> <Body> <Div id = "div1"> </div> </Body> </Html> |
|
Now jquery provides a very good jquery mobile plug-in, that is, jquery mobile, which is convenient to use.
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
