JS Mobile phone Touch screen event usage detailed

Last Update:2017-01-13 Source: Internet

Author: User

Tags touch unique id

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Handling Touch events allows you to track the position of each finger of the user. You can bind the following four kinds of touch events:

One

touchstart://the finger on the screen when it triggers
touchmove://when the finger moves on the screen.
touchend://finger when picked up from the screen when the trigger
Trigger when the touchcancel://system cancels the touch event. As to when the system will be canceled, unknown

Two

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://the position of the touch point relative to the screen
Unique ID of the identifier:>//touch object

Three

Each Touch object contains the following properties.

ClientX: The x-coordinate of the touch target in the viewport.
ClientY: The y-coordinate of the touch target in the viewport.
Identifier: A unique ID that represents a touch.
Pagex: The x-coordinate of the touch target on the page.
Pagey: The y-coordinate of the touch target on the page.
ScreenX: The x-coordinate of the touch target in the screen.
ScreenY: The y-coordinate of the touch target in the screen.
Target: The DOM node coordinates of the touch.

Cases

The code is as follows

Copy Code

<!doctype html>
<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 (); Prevent scroll bars 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>

<body>
<div id= "Div1" ></div>
</body>

Second, gesture events:

Gesturestart: When one finger presses on the screen, another finger has a trigger screen, triggering;

Gestureend: Triggers when any one of your fingers moves away from the screen;

Gesturechange: Triggers when any one of the fingers of the touch screen changes;

In the event object here, the others are the same, and there are two more useful things in the gesture:

One is rotation: the rotation angle caused by the finger change, clockwise is positive, counterclockwise negative;

There is also a scale: the distance between two fingers changes;

Cases

The code is as follows

Copy Code

<!doctype html>
<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 ' Gesturechange ':
Div.innerhtml= ' gesture change (rotation= ' +ev.rotation+ ', scale= ' +ev.scale+ ') ';
Break
}
}
Document.addeventlistener (' Gesturestart ', gesture,false);
Document.addeventlistener (' Gestureend ', gesture,false);
Document.addeventlistener (' Gesturechange ', gesture,false);
}
</script>

<body>
<div id= "Div1" ></div>
</body>

Now jquery offers a very nice jquery phone plug-in, which is jquery mobile, and it's easy to use.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More