移動端touch事件

咱們在移動端開發時，會發現會遇到一個需求，就是手觸摸手機屏幕進行滑動時，發生一系列事情，這裏我來系統整理一下touch事件。

touch事件

首先，touch事件包含三類事件：

• touchstart 手指觸摸到指定dom元素上被觸發
• touchmove 手指在指定dom元素上滑動時被觸發
• touchend 手機離開指定的dom元素時被觸發

touch屬性

下面是touch的屬性截圖：

經過這個圖，咱們能夠看到其中有三個屬性：

• changeTouches 涉及到當前事件的手指的列表
• targetTouches 正在觸摸指定dom的手指的列表
• touches 正在觸摸屏幕的全部手指的一個列表

這三個列表的差距很是的細微，首先其屬性內部包含的東西都差很少，如圖所示：

首先能夠看出其是一個數組，如今咱們詳細介紹這裏具體的屬性的意思

• clientX 觸摸點距離可視區域的水平方向距離
• clinetY 觸摸點距離可視區域的垂直方向距離
• screenX 觸摸點到屏幕最左邊的距離
• screenY 觸摸點到屏幕最上方的距離
• pageX 觸摸點到網頁最上方的距離
• pageY 觸摸點到網頁最左邊的距離
• force 觸摸點壓力
• identifier 觸摸點惟一標識
• radiusX 觸摸點橢圓的水平半徑
• radiusY 觸摸點橢圓的垂直半徑
• rotationAngle 旋轉角度
• target 觸摸目標

示例

這裏一個小demo，手觸摸屏幕，屏幕上顯示開始觸摸的點的座標以及水平方向和垂直方向移動的距離

<div id="box">
        請在移動端，PC上沒法查看效果，滑動查看效果
        <div>當前觸摸點的橫座標是:<span id="curDisX"></span>，縱座標是:<span id="curDisY"></span></div>
        <div>水平方向移動的距離是<span id="moveDisX"></span>，垂直方向移動的距離是：<span id="moveDisY"></span></div>
    </div>
    <script>
        var oBox =  document.querySelector('#box');
        var oCurDisX = document.querySelector('#curDisX');
        var oCurDisY = document.querySelector('#curDisY');
        var oMoveDisX = document.querySelector('#moveDisX');
        var oMoveDisY = document.querySelector('#moveDisY');
        var currentX, currentY, moveX, moveY;
        document.addEventListener('touchstart', (e) => {
            console.log(e.touches);
            currentX = e.touches[0].clientX;
            currentY = e.touches[0].clientY;
            oCurDisX.innerHTML = currentX;
            oCurDisY.innerHTML = currentY;
        })
        document.addEventListener('touchmove', (e) => {
            moveX = e.touches[0].clientX - currentX;
            moveY = e.touches[0].clientY - currentY;
            oMoveDisX.innerHTML = moveX;
            oMoveDisY.innerHTML = moveY;
        })
    </script>
複製代碼

注意事項

在touchend事件中，touches和targetTouches的長度都爲0，由於觸摸離開時，沒有觸摸點了，注意前面對touches、targetTouches和changeTouches的定義

一個移動端輪播圖收藏連接

歡迎來關注個人我的博客博客連接