移動端js觸摸touch詳解（附帶案例源碼）

時間 2019-12-13

標籤移動觸摸 touch 詳解附帶案例源碼欄目無線简体版

原文原文鏈接

移動端觸摸滑動原理詳解案例，實現過程經過添加DOM標籤的觸摸事件監聽，並計算觸摸距離，經過距離座標計算觸摸角度，最後經過觸摸角度去判斷往哪一個方向觸摸的。html

觸摸的事件列表數組

觸摸的4個事件：瀏覽器

touchstart      觸摸屏幕上時觸發  ide

touchmove    觸摸屏幕中滑動時觸發  函數

touchend       離開屏幕時觸發  spa

touchcancel    系統取消觸摸事件的時候觸發code

監聽觸摸後觸摸事件會實現一個event對象，這個對象裏面包括3個觸摸函數列表。htm

觸摸事件裏的3個函數：對象

touches      屏幕上全部手指列表  blog

targetTouches      在當前DOM標籤上手指的列表

changedTouches      涉及當前事件的手指的列表

觸摸函數的屬性，用於獲取座標

8個屬性：

clientX      觸摸目標在瀏覽器中的x座標

clientY      觸摸目標在瀏覽器中的y座標

identifier 標識觸摸的惟一ID。

pageX      觸摸目標在當前DOM中的x座標

pageY      觸摸目標在當前DOM中的y座標

screenX      觸摸目標在屏幕中的x座標

screenY      觸摸目標在屏幕中的y座標

target      觸摸的DOM節點目標。

Math.atan2()函數，計算角度的弧度值

angel=Math.atan2(y,x)

x 指定點的 x 座標

y 指定點的 y 座標

angel是一個弧度值（能夠比喻爲直角三角形對角的角，其中 x 是鄰邊邊長，而 y 是對邊邊長）

atan2(x,y)*180/Math.PI 轉換爲角度

觸摸詳細代碼：

<html>
<head>
    <meta charset="utf-8"/>
    <title>touch test</title>
</head>
<body>
<div id="box" style="width:100%;height:100%;border:1px solid red;"></div>
<script>
    //定義變量，用於記錄座標和角度
    var startx,starty,movex,movey,endx,endy,nx,ny,angle;
    
    //開始觸摸函數，event爲觸摸對象
    function touchs(event){
    
            //阻止瀏覽器默認滾動事件
        event.preventDefault();
        
        //獲取DOM標籤
        var box = document.getElementById('box');
        
        //經過if語句判斷event.type執行了哪一個觸摸事件
        if(event.type=="touchstart"){
        
             console.log('開始');
             
             //獲取開始的位置數組的第一個觸摸位置
            var touch = event.touches[0];
            
             //獲取第一個座標的X軸
            startx = Math.floor(touch.pageX);
            
            //獲取第一個座標的X軸
            starty = Math.floor(touch.pageY);
            
            //觸摸中的座標獲取
        }else if(event.type=="touchmove"){
        
             console.log('滑動中');
            var touch = event.touches[0];
            movex = Math.floor(touch.pageX);
            movey = Math.floor(touch.pageY);
            
            //當手指離開屏幕或系統取消觸摸事件的時候
        }else if(event.type == "touchend" || event.type == "touchcancel"){
        
                //獲取最後的座標位置
            endx = Math.floor(event.changedTouches[0].pageX);
            endy = Math.floor(event.changedTouches[0].pageY);
             console.log('結束');
             
             //獲取開始位置和離開位置的距離
            nx = endx-startx;
            ny = endy-starty;
            
            //經過座標計算角度公式 Math.atan2(y,x)*180/Math.PI
            angle = Math.atan2(ny, nx) * 180 / Math.PI;
            
            if(Math.abs(nx)<=1 ||Math.abs(ny)<=1){
                return false;
                console.log('滑動距離過小');
            }
            
            //經過滑動的角度判斷觸摸的方向
            if(angle<45 && angle>=-45){
                alert('右滑動');
                return false;
            }else if(angle<135 && angle>=45){
                alert('下滑動');
                return false;
            }else if((angle<=180 && angle>=135) || (angle>=-180 && angle<-135 )){
                alert('左滑動');
                return false;
            }else if(angle<=-45 && angle >=-135){
                alert('上滑動');
                return false;
            }
        }
    }
    
    //添加觸摸事件的監聽，並直行自定義觸摸函數
    box.addEventListener('touchstart',touchs,false);
    box.addEventListener('touchmove',touchs,false);
    box.addEventListener('touchend',touchs,false);
    
</script>
</body>
</html>