Summary of basic events on mobile terminals and summary of basic events on mobile terminals

Summary of basic events on mobile terminals and summary of basic events on mobile terminals

1. touch event

Touchstart is triggered when the finger is placed on the screen.

The touchmove finger moves on the screen and is triggered continuously.

Touchend finger exit screen trigger

Touchcancel is triggered when the system stops the tracking. This event is temporarily unavailable

Note:

1. You can only add events on the mobile terminal through the listening function, but not on.

2. Do not use the mouse in the mobile terminal.

3. Mobile events will trigger the default behavior of the browser. Therefore, when calling the event, the default behavior should be blocked by ev. preventDefault.

Demo:

Document. addEventListener ('touchstart', function (ev) {ev. preventDefault () ;}); var box = document. getElementById ("box"); box. addEventListener ('touchstart', function () {this. innerHTML = 'finger pressed ';}); box. addEventListener ('touchmove ', function () {this. innerHTML = 'finger moved ';}); box. addEventListener ('touchend', function () {this. innerHTML = 'finger left ';});

2. touch event object

Ev. touches: Finger list of the current screen

Finger list on the current element of ev.tar getTouches

Ev. changedTouches: the finger list that triggers the current event

Each touch object contains the following attributes (print ev. touches as follows ):

ClientX // touch the X coordinate of the target in the viewport.

ClientY // touch the Y coordinate of the target in the viewport.

Identifier // identifies the unique ID of a 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 // touch the DOM node target.

Demo:

Var box = document. getElementById ("box"); // equivalent to mousedownbox. addEventListener ('touchstart', function (ev) {// console. log (ev. touches); this. innerHTML = ev. touches. length; // index of the pressed hand });

3. devicemotion

Devicemotion encapsulates events of motion sensor data to obtain Motion Acceleration and other data in the mobile phone's motion status.

The acceleration data includes the following three directions:

X: the mobile phone screen is displayed horizontally;

Y: Portrait throughout the mobile phone screen;

Z: Vertical Mobile Phone screen

Because some devices do not exclude the influence of gravity, the event returns two attributes:

1. accelerationIncludingGravity (acceleration with gravity)

2. acceleration (excluding acceleration caused by gravity)

Note: This event can only be placed on the window.

Demo1: displays the value of gravity acceleration.

window.addEventListener('devicemotion',function(ev){ var motion=ev.accelerationIncludingGravity; box.innerHTML='x:'+motion.x+'<br/>'+'y:'+motion.y+'<br/>'+'z:'+motion.z;});

Demo2: The square moves around the gravity

Window. addEventListener ('deviceid', function (ev) {var motion = ev. accelerationIncludingGravity; var x = parseFloat (getComputedStyle (box ). left); // box current left Value box. style. left = x + motion. x + 'px ';});

Demo3: How It Works

Var box = document. getElementById ('box'); var lastRange = 0; // the magnitude of the last shake var isShake = false; // determines whether the user has shaken the window significantly. addEventListener ('deviceid', function (ev) {var motion = ev. accelerationIncludingGravity; var x = Math. abs (motion. x); var y = Math. abs (motion. y); var z = Math. abs (motion. z); var range = x + y + z; // if (range-lastRange> 100) {// This condition indicates that the user is currently shaking isShake = true;} if (isShake & range <50) {// This condition is true, it indicates that the user's shaking speed is very small and the box will be stopped. innerHTML = 'shaken '; isShake = false ;}});

4. deviceorientation

Deviceorientation encapsulates the event of the direction sensor data to obtain the direction data (the angle, orientation, and orientation of the mobile phone) in the static state of the mobile phone)

Ev. beta indicates the Rotation Angle of the device on the X axis. The value range is-180 ~ 180. It describes the situation where the device rotates from front to back.

Ev. gamma indicates the Rotation Angle of the device on the Y axis, ranging from-90 ~ 90. It describes the rotation of a device from left to right.

Ev. alpha indicates the Rotation Angle of the device along the Z axis, ranging from 0 ~ 360.

Note: This event can only be placed on the window.

Demo:

Window. addEventListener ('deviceorientation', function (ev) {box. innerHTML = 'x axis skew: '+ ev. beta. toFixed (1) + '</br> Y axis skew:' + ev. gamma. toFixed (1) + '</br> Z axis skew:' + ev. alpha. toFixed (1 );});

5. gesture

IOS Safari also introduces a set of gesture events. When two fingers touch the screen, a gesture is generated. A gesture usually changes the size of the display item or rotates the display item. There are three gesture events:

Gesturestart is triggered when one finger is already on the screen and the other finger is on the screen.
Gesturechange is triggered when the position of any finger on the touch screen changes
Gestureend triggered when any finger is removed from the screen
Ev. rotation indicates the rotation angle caused by finger changes. negative values indicate counter-clockwise, and positive values indicate clockwise, starting from 0.
Ev. scale indicates the distance between two fingers, which decreases the distance from 1 and increases with the distance.

Note:

1. Currently, the gesture event is only supported by IOS 2.0 and later versions, but not by Android.

2. Be sure to block the default behavior of the browser.

Demo1: Multi-finger Rotation

Var startDeg = 0; // The angle after the last rotation // press box with two or more fingers. addEventListener ('gesturestart', function () {this. style. background = 'blue'; // rotate (90deg) if (this. style. transform) {startDeg = parseFloat (this. style. transform. split (') [1]) ;}}); // two or more fingers change the box. addEventListener ('gesturechang', function (ev) {/* this. style. background = 'black'; this. innerHTML = ev. rotation; */this. style. transform = 'rotate ('+ (ev. rotation + startDeg) + 'deg) ';}); // lift box with two or more fingers. addEventListener ('gestureend', function () {this. style. background = 'green ';});

Demo2: Multi-finger Scaling

Document. addEventListener ('touchstart', function (ev) {ev. preventDefault () ;}); document. addEventListener ('touchmove ', function (ev) {ev. preventDefault () ;}); var box = document. getElementById ("box"); var startScale = 1; // The angle after the last scaling // press box with two or more fingers. addEventListener ('gesturestart', function () {this. style. background = 'blue'; // rotate (90deg) if (this. style. transform) {startScale = parseFloat (this. style. transform. split ( '(') [1]) ;}}); // two or more fingers change the box. addEventListener ('gesturechang', function (ev) {/* this. style. background = 'black'; this. innerHTML = ev. rotation; */var SC = ev. scale * startScale; SC = SC <0.5? 0.5: SC; // set the minimum scale to 0.5 this. style. transform = 'scale ('+ SC +') ';}); // lift box with two or more fingers. addEventListener ('gestureend', function () {this. style. background = 'green ';});

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!