JS檢測手勢滑動方向的方法是監聽touchstart、touchmove、touchend事件并計算坐標差，具體步驟為：1. 監聽觸摸事件，記錄touchstart時的起始坐標；2. 在touchend時獲取結束坐標并調用處理函數；3. 計算deltax和deltay，通過正負值判斷滑動方向；4. 設置閾值避免誤判；5. 優化性能時減少touchmove計算量或使用requestanimationframe；6. 多點觸控可通過遍歷touches數組處理。應用場景包括輪播圖切換、頁面滑動、下拉刷新等。在react中可結合useref、useeffect實現，也可使用react-use-gesture庫。除此之外，還可使用pointer events api或第三方庫如hammer.js實現手勢檢測。
js檢測手勢滑動方向，關鍵在于監聽 touchstart, touchmove, touchend 事件，并計算起始位置和結束位置的坐標差，以此判斷滑動方向。 這聽起來簡單，但實際應用中有很多需要注意的細節。
解決方案
-
監聽觸摸事件： 首先，你需要監聽 touchstart，touchmove，和 touchend 這三個事件。 touchstart 用于記錄手指觸摸屏幕的起始位置，touchmove 用于實時追蹤手指移動的位置，touchend 用于記錄手指離開屏幕時的位置。
let startX, startY; document.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; startY = e.touches[0].clientY; }, false); document.addEventListener('touchmove', (e) => { // 可以選擇性地在這里做一些實時反饋，比如跟隨著手指移動的動畫 }, false); document.addEventListener('touchend', (e) => { const endX = e.changedTouches[0].clientX; const endY = e.changedTouches[0].clientY; handleSwipe(startX, startY, endX, endY); }, false); -
記錄起始和結束位置： 在 touchstart 事件中，使用 e.touches[0].clientX 和 e.touches[0].clientY 來獲取觸摸點的 X 和 Y 坐標，并保存為起始位置。 在 touchend 事件中，使用 e.changedTouches[0].clientX 和 e.changedTouches[0].clientY 獲取觸摸結束時的 X 和 Y 坐標。 注意 touches 和 changedTouches 的區別，touches 包含當前屏幕上所有觸摸點的信息，而 changedTouches 只包含觸發 touchend 事件的觸摸點的信息。
-
計算坐標差： 在 touchend 事件的處理函數中，計算起始位置和結束位置的 X 坐標差 (deltaX) 和 Y 坐標差 (deltaY)。
function handleSwipe(startX, startY, endX, endY) { const deltaX = endX - startX; const deltaY = endY - startY; // 接下來判斷滑動方向 } -
判斷滑動方向： 根據 deltaX 和 deltaY 的正負值來判斷滑動方向。 例如，如果 deltaX 大于 0，則表示向右滑動；如果 deltaX 小于 0，則表示向左滑動。 同理，可以判斷向上或向下滑動。
function handleSwipe(startX, startY, endX, endY) { const deltaX = endX - startX; const deltaY = endY - startY; if (Math.abs(deltaX) > Math.abs(deltaY)) { // 水平滑動 if (deltaX > 0) { console.log("向右滑動"); } else { console.log("向左滑動"); } } else { // 垂直滑動 if (deltaY > 0) { console.log("向下滑動"); } else { console.log("向上滑動"); } } } -
設置靈敏度閾值： 為了避免誤判，可以設置一個靈敏度閾值。 只有當滑動距離超過這個閾值時，才認為發生了滑動。 這可以避免一些小的、無意的觸摸被識別為滑動。
const threshold = 50; // 閾值，單位像素 function handleSwipe(startX, startY, endX, endY) { const deltaX = endX - startX; const deltaY = endY - startY; if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > threshold) { // 水平滑動 if (deltaX > 0) { console.log("向右滑動"); } else { console.log("向左滑動"); } } else if (Math.abs(deltaY) > threshold) { // 垂直滑動 if (deltaY > 0) { console.log("向下滑動"); } else { console.log("向上滑動"); } } }
如何優化手勢滑動檢測的性能？
優化手勢滑動檢測的性能，可以從幾個方面入手。 首先，減少 touchmove 事件處理函數的計算量。 touchmove 事件會頻繁觸發，如果在這個函數中進行復雜的計算，會影響性能。 可以考慮只在必要的時候才進行計算，例如，每隔一段時間或者當滑動距離超過一定值時。 另外，可以使用 requestAnimationFrame 來優化動畫效果。 requestAnimationFrame 會在瀏覽器下一次重繪之前執行指定的函數，這可以保證動畫的流暢性。
如何處理多點觸控的情況？
處理多點觸控的情況稍微復雜一些。 你需要遍歷 e.touches 數組，獲取每個觸摸點的信息。 然后，可以根據你的需求來處理這些觸摸點。 例如，你可以計算兩個觸摸點之間的距離，來判斷是否發生了捏合縮放。 或者，你可以忽略多點觸控，只處理第一個觸摸點。
在移動端開發中，手勢滑動檢測有哪些常見的應用場景？
手勢滑動檢測在移動端開發中有很多常見的應用場景。 例如，可以用來實現輪播圖的切換，或者實現頁面的左右滑動切換。 還可以用來實現下拉刷新，或者上拉加載更多。 甚至可以用來實現一些復雜的手勢操作，例如畫板應用中的繪畫功能。 總而言之，手勢滑動檢測可以為移動應用帶來更加自然、流暢的用戶體驗。
如何在 React 中使用手勢滑動檢測？
在 React 中使用手勢滑動檢測，可以使用 react-use-gesture 這樣的庫，它封裝了底層的手勢事件處理，提供了更高級的 API。 也可以自己實現，使用 useRef 來保存起始坐標，useEffect 來監聽事件，并使用 useCallback 來優化事件處理函數。
import React, { useRef, useEffect, useCallback } from 'react'; function SwipeComponent() { const startRef = useRef({ x: 0, y: 0 }); const handleTouchStart = useCallback((e) => { startRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY, }; }, []); const handleTouchEnd = useCallback((e) => { const endX = e.changedTouches[0].clientX; const endY = e.changedTouches[0].clientY; const deltaX = endX - startRef.current.x; const deltaY = endY - startRef.current.y; if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) { if (deltaX > 0) { console.log("向右滑動"); } else { console.log("向左滑動"); } } else if (Math.abs(deltaY) > 50) { if (deltaY > 0) { console.log("向下滑動"); } else { console.log("向上滑動"); } } }, []); useEffect(() => { document.addEventListener('touchstart', handleTouchStart); document.addEventListener('touchend', handleTouchEnd); return () => { document.removeEventListener('touchstart', handleTouchStart); document.removeEventListener('touchend', handleTouchEnd); }; }, [handleTouchStart, handleTouchEnd]); return ( 滑動我！ ); } export default SwipeComponent;
除了 touch 事件，還有其他方法可以檢測手勢滑動嗎？
除了 touch 事件，還可以使用 Pointer Events API 來檢測手勢滑動。 Pointer Events API 統一了鼠標、觸摸和觸控筆等輸入設備，提供了更加靈活和強大的事件處理能力。 另外，一些現代 JavaScript 框架和庫也提供了手勢識別的功能，例如 Hammer.js。 這些框架和庫封裝了底層的手勢事件處理，提供了更高級的 API，可以更加方便地實現手勢滑動檢測。
