前言

今天寫一個小Demo，有個地方涉及到了左滑右滑的邏輯，本來想著用外掛來著，但是想到自己好久沒用原生js寫滑動的監聽了，所以試著用原生JS來實現了一下，畢竟溫故而知新嘛，同時做個記錄。先把實現的效果貼出來：

構思

想要寫出絲滑的觸控滑動事件的監聽，要考慮以下3個方面的邏輯：

• 距離： 滑動距離要大於40
• 時間： 滑動時間小於在0.5秒，即500毫秒內完成手指按下，拖動，離開（避免只是手指在螢幕就觸發）
• 滑動方向：
  • 左右滑動的條件是：X軸移動的距離大於Y軸移動的距離，為正則向左，為負則向右
  • 上下滑動的條件是Y軸移動的距離大於X軸移動的距離，為正則向上，為負則向下

有了基礎的構思，我們就可以根據這個思路來完成程式碼了~

監聽的事件

說到監聽觸控滑動，要用到的自然就是下面這三個觸控事件了：

1. touchstart 觸控開始，手指點選螢幕時觸發（可監聽多點觸控，後面的手指也同樣會觸發）

2. touchmove 接觸點改變，滑動時持續觸發

3. touchend 觸控結束，手指離開螢幕時觸發

這三個觸控事件每個都包括了三個觸控物件列表（可根據觸控點實現多點觸控）：

1. towww.cppcns.comuches：當前螢幕上的所有手指觸控點的列表

2. targetTouches：當前DOM元素上手指的列表

3. changedTouches：當前事件手指的列表

同時每個觸控物件Touch包含的屬性如下：

- identifier：標識觸控的唯一ID

- p程式設計客棧ageX：觸控點在頁面中的x座標

- pageY：觸控點在頁面中的y座標

- screenX：觸控點在螢幕中的x座標

- screenY：觸控點在螢幕中的y座標

- clientX：觸控點在視口中的x座標

- clientY：觸控點在視口中的y座標

- target：觸控的DOM節點

程式碼實現

有了上面的構思和觸控事件的基礎，我們很容易就能把程式碼敲出來啦~

let box = document.querySelector('body') // 監聽物件
let startTime = '' // 觸控開始時間
let startDistanceX = '' // 觸控開始X軸位置
let startDistanceY = '' // 觸控開始Y軸位置
let endTime = '' // 觸控結束時間
let endDistanceX = '' // 觸控結束X軸位置
let endDistanceY = '' // 觸控結束Y軸位置
let moveTime = '' // 觸控時間
let moveDistanceX = '' // 觸控移動X軸距離
let moveDistanceY = '' // 觸控移動Y軸距離
box.addEventListener("touchstart",(e) => {
    startTime = new Date().getTime()
    startDistanceX = e.touches[0].screenX
    startDistanceY = e.touches[0].shttp://www.cppcns.com
 
creenY
})
box.addEventListener("touchend",(e) => {
    endTime = new Date().getTime()
    endDistanceX = e.changedTouches[0].screenX
    endDistanceY = e.changedTouches[0].screenY
    moveTime = endTime - startTime
    moveDistanceX = startDistanceX - endDistanceX
    moveDistanceY = startDistanceY - endDistanceY
    console.http://www.cppcns.comlog(mov程式設計客棧eDistanceX,moveDistanceY)
    // 判斷滑動距離超過40 且 時間小於500毫秒
    if ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {
        // 判斷X軸移動的距離是否大於Y軸移動的距離
        if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
        // 左右
        console.log(moveDistanceX > 0 ? '左' : '右')
        } else {
        // 上下
        console.log(moveDistanceY > 0 ? '上' : '下')
        }
    }
})

執行一下看看吧：

可以看出，觸控時間大於500ms不會觸發，滑動距離小於40也不會觸發，如果是有角度的滑動，則會以XY軸移動距離最遠的為準。完美實現！

後記

前端框架發展日益迅猛，很多人直接上手學習框架也毫無壓力，對原生JS的學習就不那麼重視了。但萬變不離其宗，框架的優勢在於它的設計思想和模式，想要深刻的理解還是要有原生JS做基礎，想要走得遠，還是要把基礎夯實，畢竟萬丈高樓平地起不是？

到此這篇關於如何利用原生JS實現觸控滑動監聽事件的文章就介紹到這了,更多相關JS觸控滑動監聽事件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！