Summary and application of basic events on mobile terminal

1. Touch Event touch

touchstart Triggered by putting your finger on the screen

touchmove finger moves on the screen and triggers continuously

touchend Finger off Screen Triggered

touchcancel Triggered when the system stops tracing, this event is temporarily unavailable

Note:

1. Events on the mobile terminal can only be added by listening function, not on

2. Do not use the mouse in the mobile terminal

3. Events on the mobile side will trigger the default behavior of the browser, so the default behavior should be blocked when calling events. ev. preventDefault.

demo:

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

2. touch Event Object

ev. touches Finger List for Current Screen

ev. targetTouches Finger List on Current Element

ev. changedTouches list of fingers that trigger the current event

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

clientX//Touch the X coordinates of the target in the viewport.

clientY//Touch the Y coordinates of the target in the viewport.

Identifier//Mark touch only 1ID.

pageX//Touch the X coordinates of the target in the page.

pageY//Touch the target's Y coordinates in the page.

screenX//Touch the target's X coordinates in the screen.

screenY//Touch the target's Y coordinates in the screen.

target//Touch the DOM node target.

demo:

var box=document.getElementById("box");
// Equivalent to mousedown
box.addEventListener('touchstart',function(ev){
 //console.log(ev.touches);
 this.innerHTML=ev.touches.length;// Press the hand index 
});

3. Equipment acceleration event devicemotion

devicemotion encapsulates the events of motion sensor data, and can obtain data such as motion acceleration of mobile phone in motion state.

The acceleration data includes the following three directions:

x: Horizontal through the mobile phone screen;

y: Vertically runs through the mobile phone screen;

z: Vertical Phone Screen

Since some devices do not exclude the influence of gravity, this event will return two attributes:

1. accelerationIncludingGravity (including acceleration of gravity)

2. acceleration (acceleration excluding the influence of gravity)

Note: This event can only be placed on 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 left and right with gravity

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

demo3: Shake 1 Shake Application Principle

var box=document.getElementById('box');
var lastRange=0; // Upper 1 Amplitude of secondary shaking 
var isShake=false; // Determine whether the user has shaken greatly or not 
window.addEventListener('devicemotion',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; // Amplitude of current shaking 
 if(range-lastRange>100){
 // This condition means that users are now shaking greatly 
 isShake=true;
 }
 if(isShake && range<50){
 // This condition is true, indicating that the user's shaking range is very small and will stop 
 box.innerHTML=' Shake ';
 isShake=false;
 }
});

4. Device Direction Event deviceorientation

deviceorientation encapsulates the event of direction sensor data, which can obtain the direction data of the mobile phone in the static state (the angle, orientation and orientation of the mobile phone, etc.)

ev. beta represents the angle of rotation of the device on the x axis, ranging from-180 to 180. It describes the rotation of the equipment from front to back.

ev. gamma represents the angle of rotation of the device on the y axis, ranging from-90 to 90. It describes the equipment rotating from left to right.

ev. alpha represents the angle of rotation of the device along the z axis, ranging from 0 to 360.

Note: This event can only be placed on window

demo:

window.addEventListener('deviceorientation',function(ev){
 box.innerHTML='x Axial tilt :'+ev.beta.toFixed(1)+'</br>y Axial tilt :'+ev.gamma.toFixed(1)+'</br>z Axial tilt :'+ev.alpha.toFixed(1);
});

5. Gesture Event gesture

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

gesturestart Triggered when one finger has been pressed on the screen and the other finger has been touched on the screen
gesturechange triggers when the position of any 1 finger touching the screen changes
gestureend Triggered when any 1 finger is removed from the top of the screen
ev. rotation represents the rotation angle caused by finger change, negative value indicates counterclockwise, positive value indicates clockwise, starting from 0.
ev. scale indicates the distance between two fingers. Inward contraction will shorten the distance. This value starts from 1 and increases as the distance increases.

Note:

1. At present, gesture events are only supported by IOS 2.0, but Android is not supported for the time being.

2. 1 Be sure to block the browser's default behavior.

demo1: Multi-fingered rotation

var startDeg=0; // Angle after last rotation 
// Press with two or more fingers 
box.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 
box.addEventListener('gesturechange',function(ev){
 /*this.style.background='black';
 this.innerHTML=ev.rotation;*/
 this.style.transform='rotate('+(ev.rotation+startDeg)+'deg)';
});
// Two or more fingers raised 
box.addEventListener('gestureend',function(){
 this.style.background='green';
});

demo2: Multi-finger Zoom

document.addEventListener('touchstart',function(ev){
 ev.preventDefault();
});
document.addEventListener('touchmove',function(ev){
 ev.preventDefault();
});
var box=document.getElementById("box");
var startScale=1; // Angle after last scaling 
// Press with two or more fingers 
box.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 
box.addEventListener('gesturechange',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 zoom to 0.5
 this.style.transform='scale('+sc+')';
});
// Two or more fingers raised 
box.addEventListener('gestureend',function(){
 this.style.background='green';
});