移动端原生手势事件

怼烎@ 2021-07-24 14:04 440阅读 0赞

touchstart 	当手指接触屏幕时触发
    touchmove 	当已经接触屏幕的手指开始移动的时候触发
    touchend 	当手指离开屏幕时触发
    touchcancel 可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件
    
    1、由于触摸会导致屏幕动来动去,使用时先阻止默认事件
    	event.preventDefault()
    
    2、event对象包含的额外参数
    	(1)touches：表示当前跟踪的触摸操作的touch对象的数组。
    		当一个手指在触屏上时，event.touches.length=1,
    		当两个手指在触屏上时，event.touches.length=2，以此类推。
    			event.touches={0: Touch, length: 1}
    		
    	(2)、targetTouches：特定于事件目标的touch对象数组。
    		因为touch事件是会冒泡的，所以利用这个属性指出目标对象。
    	
    	(3)、changedTouches：表示自上次触摸以来发生了什么改变的touch对象的数组,涉及当前事件的手指的一个列表。
    	
    	每个touch对象都包含下列几个属性：
    		1.Touch.identifier：此 Touch 对象的唯一标识符。 一次触摸动作(我们指的是手指的触摸)在平面上移动的整个过程中，该标识符不变。 可以根据它来判断跟踪的是否是同一次触摸过程，此值为只读属性。
    		
    		 
    		2.Touch.screenX：触点相对于屏幕左边沿的X坐标。只读属性。
    		
    		 
    		3.Touch.screenY：触点相对于屏幕上边沿的Y坐标。只读属性。
    		
    		 
    		4.Touch.clientX：触点相对于可见视区(visual viewport)左边沿的X坐标。不包括任何滚动偏移。只读属性。
    		
    		 
    		5.Touch.clientY：触点相对于可见视区(visual viewport)上边沿的Y坐标。不包括任何滚动偏移。只读属性。
    		
    		 
    		6.Touch.pageX：触点相对于HTML文档左边沿的X坐标。当存在水平滚动的偏移时，这个值包含了水平滚动的偏移。只读属性。
    		
    		 
    		7.Touch.pageY：触点相对于HTML文档上边沿的Y坐标。当存在水平滚动的偏移时，这个值包含了垂直滚动的偏移。只读属性。
    		
    		 
    		8.Touch.radiusX：能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径。这个值的单位和 screenX 相同。只读属性。
    		
    		 
    		9.Touch.radiusY：能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径。这个值的单位和 screenY 相同。只读属性。
    		
    		 
    		10.Touch.rotationAngle：它是这样一个角度值：由radiusX 和 radiusY描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面。只读属性。
    		
    		 
    		11.Touch.force：手指挤压触摸平面的压力大小，从0.0(没有压力)到1.0(最大压力)的浮点数。只读属性。
    		
    		 
    		12.Touch.target：当这个触点最开始被跟踪时(在 touchstart 事件中)，触点位于的HTML元素。哪怕在触点移动过程中，触点的位置已经离开了这个元素的有效交互区域，或者这个元素已经被从文档中移除。需要注意的是，如果这个元素在触摸过程中被移除，这个事件仍然会指向它，但是不会再冒泡这个事件到 window 或 document 对象。因此，如果有元素在触摸过程中可能被移除，最佳实践是将触摸事件的监听器绑定到这个元素本身，防止元素被移除后，无法再从它的上一级元素上侦测到从该元素冒泡的事件。只读属性。
    
    3、手指手势事件
    	【注意】只有两个手指都触摸到事件的接收容器时才触发这些手势事件。
    	
        gesturestart：当一个手指已经按在屏幕上，而另一个手指又触摸在屏幕时触发。
        gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发。
        gestureend：当任何一个手指从屏幕上面移开时触发。
      	
      	参数:
      	rotation：表示手指变化引起的旋转角度，负值表示逆时针，正值表示顺时针，从零开始。
    	scale：表示两个手指之间的距离情况，向内收缩会缩短距离，这个值从1开始，并随距离拉大而增长。
    		
    	var div = document.getElementById("div");
    	div.ongesturechange = function(e){
    	
    	   scale代表手势产生的缩放比例，小于1是缩小，大于1是放大，原始为1
    	   var scale = e.scale;
    	   
    	   rotation代表旋转手势的角度，值区间[0,360]，正值顺时针旋转，负值逆时针
    	   var angle = e.rotation;
    	};
    
    4、重力感应
    
    	只需要为body节点添加onorientationchange事件即可。在此事件中由window.orientation属性得到代表当前手机方向的数值。window.orientation的值列表如下：
    	0：与页面首次加载时的方向一致
    	-90：相对原始方向顺时针转了90°
    	180：转了180°
    	90：逆时针转了90°据我测试，Android2.1尚未支持重力感应。以上即目前的触屏事件，这些事件尚未并入标准，但已被广泛使用。本人Android2.1，未在其他环境下测试。

代码示例:  
实现监听移动端的滑动方向:

然而在实际的操作中，手指的上下滑动很难做到直上直下，只要稍微有点斜，只要稍微有点斜，就会被X轴的判断先行接管，而与我们实际的操作意愿相背离。
    此时就需要添加特殊的判断技巧，修改代码如下（工作中用如下代码即可）：

方式一:

// 原生js addeventListener 事件监听方法 jquery方法同上就不写了
        var mybody = document.getElementsByTagName('body')[0];
    
       
    
        //滑动处理
    
        var startX, startY, moveEndX, moveEndY, X, Y;   
    
        mybody.addEventListener('touchstart', function(e) { 
    
            e.preventDefault();
    
            startX = e.touches[0].pageX;
    
            startY = e.touches[0].pageY;
    
        }, false);
    
        mybody.addEventListener('touchmove', function(e) { 
    
            e.preventDefault();
    
            moveEndX = e.changedTouches[0].pageX;
    
            moveEndY = e.changedTouches[0].pageY;
    
            X = moveEndX - startX;
    
            Y = moveEndY - startY;
    
            
    
            if ( Math.abs(X) > Math.abs(Y) && X > 0 ) { 
    
                alert("向右");
    
            }
    
            else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) { 
    
                alert("向左");
    
            }
    
            else if ( Math.abs(Y) > Math.abs(X) && Y > 0) { 
    
                alert("向下");
    
            }
    
            else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) { 
    
                alert("向上");
    
            }
    
            else{ 
    
                alert("没滑动");
    
            }
    
        });
    
     
    
    以上代码，在测试时仍不能达到预期的效果，因为还有一个问题——body的元素的高仔细查查，发现其值是0；
    故还应该在此基础上添加以下代码：
    
        var mybody = document.getElementsByTagName('body')[0];
    
        var h = document.documentElement.clientHeight;
    
            mybody.style.height = h + 'px';
    
    到此，已实现了手机移动端手指的上滑、下滑、左滑和右滑操作。

方式二:

滑动屏幕事件使用HTML5中的touchstart滑动开始事件和touchmove滑动结束事件。
    方向的判断：以起点做平面坐标系，与终点连线做直线，直线与x正半轴计算角度；我们以45度角为方向分割线，如：只要滑动角度大于等于45度且小于135度，则判断它方向为向上滑。如图所示：
    使用Math.atan2来计算起点与终点形成的直线角度。

// 原生js addeventListener 事件监听方法 jquery方法同上就不写了
      var h = document.documentElement.clientHeight,
    
              mybody = document.getElementsByTagName('body')[0];
    
              mybody.style.height = h + 'px';
    
     
    
     
    
            //返回角度
    
            function GetSlideAngle(dx,dy) { 
    
              return Math.atan2(dy,dx) * 180 / Math.PI;
    
            }
    
     
    
            //根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
    
            function GetSlideDirection(startX,startY, endX, endY) { 
    
              var dy = startY - endY;
    
              var dx = endX - startX;
    
              var result = 0;
    
     
    
              //如果滑动距离太短
    
              if (Math.abs(dx) < 2 && Math.abs(dy) < 2) { 
    
                 return result;
    
              }
    
              var angle = GetSlideAngle(dx, dy);
    
              if (angle >= -45 && angle < 45) { 
    
                 result = 4;
    
              }else if (angle >= 45 && angle < 135) { 
    
                 result = 1;
    
              }else if (angle >= -135 && angle < -45) { 
    
                 result = 2;
    
              }else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { 
    
                 result = 3;
    
              }
    
              return result;
    
            }
    
     
    
     
    
            //滑动处理
    
            var startX, startY;
    
            mybody.addEventListener('touchstart', function (ev){ 
    
              ev.preventDefault();
    
              startX = ev.touches[0].pageX;
    
              startY = ev.touches[0].pageY; 
    
            }, false);
    
     
    
            mybody.addEventListener('touchmove', function (ev){ 
    
              var endX, endY;
    
              ev.preventDefault();
    
              endX = ev.changedTouches[0].pageX;
    
              endY = ev.changedTouches[0].pageY;
    
     
    
            var direction = GetSlideDirection(startX, startY, endX, endY);
    
            switch (direction){ 
    
              case 0:
    
                alert("没滑动");
    
                break;
    
              case 1:
    
                alert("向上");
    
                break;
    
              case 2:
    
                alert("向下");
    
                break;
    
              case 3:
    
                alert("向左");
    
                break;
    
              case 4:
    
                alert("向右");
    
                break;
    
              default:          
    
            } 
    
          }, false);