移動端touch事件

我是大哥的女朋友發表於2018-07-27
事件

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

touch事件

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

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

touch屬性

下面是touch的屬性截圖：

移動端touch事件

通過這個圖，我們可以看到其中有三個屬性：

  • changeTouches 涉及到當前事件的手指的列表
  • targetTouches 正在觸控指定dom的手指的列表
  • touches 正在觸控螢幕的所有手指的一個列表

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

移動端touch事件

首先可以看出其是一個陣列，現在我們詳細介紹這裡具體的屬性的意思

  • 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的定義

移動端touch事件

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

歡迎來關注我的個人部落格部落格連結

相關文章