In mobile development, existing gesture events are only supported by browsers on IOS, so browser gesture events on other devices must be upgraded on touchstart, toucmove, touchend events on the mobile side. Below is a description of the gesture events on the mobile side upgraded.
Mobile Touch Events (Basic Events)
- Touch start - Touch start
- Touch move - Touch move
- Touch end--Touch end
- Touch cancel - Touch interruption (interruption during touch, such as a pop-up box)
box.addEventListener('touchmove',function (event) { console.log('Touch Move'); }
touchEvent object
- Touches - Number of touches on the screen when an event is triggered
- targetTouches - Number of contacts on event elements when an event is triggered
- changedTouches - Number of contacts that trigger the event to change
- target - event element
- stopPropagation() - Prevent event bubbles
- preventDefault() - Prevent default behavior
touchlist object
touchEvent object collection, class array object;
The targetTouches, touches, changedTouches properties all return touchlist objects
touch object
- clientX/clientY--The position of the contact point on the viewport
- pageX/pageY--Location of contact on page
- screenX/screenY - Location of contact on screen
box.addEventListener('touchstart',function (event) { console.log(event.touches); //Output Touchlist{0:Touch,length:1} when one finger touches var startX = event.touches[0].clientX; //Location of Contact on Viewport }
Gesture events
Gesture events for IOS
1.1 Event
- gesturestart - gesture starts, finger touches the current element, screen has two or more fingers
- gesturechange - Gesture change, finger touches current element, two or more finger positions on screen are moving
- gestureend - The gesture is over, after gesturestart, there are only two or fewer fingers left on the screen (not including two)
1.2 New attributes for touchEvent
- scale Contact Distance to Contact Initial Distance Ratio
- The difference between the rotation contact angle and the initial angle
box.addEventListener('gesturechange', function(event){ box.innerHTML = 'rotation : '+event.rotation + '<br>'; box.innerHTML += 'scale : '+event.scale + '<br>'; });
Mobile-side gesture events (multi-finger events)
//Encapsulate gestrue.js plug-in (function (w) { /** * Used to monitor gesture events for elements * @param node Elements to listen on * @param callback Object, object has three functions start, change, end */ function gesture(node, callback) { //Gesture Start // When you start touching an element, determine the number of fingers on the screen >= 2 node.addEventListener('touchstart', function(event) { if (event.touches.length >= 2) { //The tag has triggered the start of the gesture node.isGestureStart = true; //Calculate the initial distance between two contacts this.startDst = getDst(event.touches[0], event.touches[1]); //Calculate the initial angle of two contacts this.startDeg = getDeg(event.touches[0], event.touches[1]); // Callback function if (callback && typeof(callback['start']) === 'function') { callback['start'](); } } }); // Gesture Movement // When a finger moves, determine the number of fingers on the screen >= 2 node.addEventListener('touchmove', function(event) { if (event.touches.length >= 2) { // Calculate the distance between the current two contacts var currentDst = getDst(event.touches[0], event.touches[1]); // Calculate the current angle between the two contacts of a Book var currentDeg = getDeg(event.touches[0], event.touches[1]); // Calculates the distance between the current two contacts and the initial distance ratio of the two contacts event.scale = currentDst / this.startDst; // Calculate changes in angle between two contacts event.rotation = currentDeg - this.startDeg; //Callback function if (callback && typeof(callback['change']) === 'function') { callback['change'](event); } } }); // Gesture End // Determine the number of fingers on the screen < 2 when a gesture has been triggered and a touch has ended node.addEventListener('touchend', function(event) { if (node.isGestureStart && event.touches.length < 2) { //Reset Tag node.isGestureStart = false; //Callback function if (callback && typeof(callback['end']) === 'function') { callback['end'](); } } }); /** * Calculate the position of two contacts * @param touch1 First contact * @param touch2 Second contact */ function getDst(touch1, touch2) { //Calculate the length of two right-angled edges var x = touch2.clientX - touch1.clientX; //Distance in horizontal direction var y = touch2.clientY - touch1.clientY; //Distance in vertical direction //Using Pythagorean Theorem, the distance between two contacts (length of bevel) var z = Math.sqrt(x*x + y*y); // Return results return z; } /** * Calculate the angle between two contacts (horizontal auxiliary line) * @param touch1 First contact * @param touch2 Second contact */ function getDeg(touch1, touch2) { //Calculate the distance between two contacts, the length of two right-angled edges var x = touch2.clientX - touch1.clientX; //Adjacent var y = touch2.clientY - touch1.clientY; //Opposite side //Calculate an angle based on the ratio tan of two right-angled edges var angle = Math.atan2(y, x); //Is a radian //Calculate Angle in Radians var deg = angle / Math.PI * 180; //Return angle return deg; } } //Expose w.gesture = gesture; })(window);
Use Case - Scale and Rotate Elements
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,viewport-fit:cover"> <title>Scaling and Rotation of Elements</title> <style> * { margin:0; padding:0; } html,body,#app { width: 100%; height: 100%; overflow: hidden; } #box { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 150px; height: 150px; background-color: #f90; } </style> </head> <body> <div id="app"> <div id="box"></div> </div> **transformcss.js Code can see the author's'transform function'Article** <script src="js/transformcss.js"></script> <script src="js/gestrue.js"></script> <script> (function () { //Get Elements var app = document.querySelector('#app'); var box = document.querySelector('#box'); //Prevent browser default behavior app.addEventListener('touchstart', function(event) { event.preventDefault(); }); gesture(box, { start: function(){ //When starting a gesture, the scaling ratio of the element is recorded box.startScale = transformCss(box, 'scale'); //Default 1 //When calculating the start gesture, the initial rotation angle of the element box.startRotate = transformCss(box, 'rotate'); //Default 0 }, change: function(event){ //Scaling transformCss(box, 'scale', box.startScale * event.scale); //Realize Rotation transformCss(box, 'rotate', box.startRotate + event.rotation) } }); })(); </script>
Note: The author is just a beginner who gropes silently on the front road. If this article involves errors, please correct them in time. If this article is helpful to you, click on the website of Ming Brother http://learn.fuming.site/ Learn more!