当前位置：首页 > article >正文

判断手机屏幕上的横向滑动（左滑和右滑）

article 2025/8/14 15:10:03

在JavaScript中，你可以通过监听触摸事件（touch events）来判断用户在手机屏幕上的横向滑动方向。以下是实现方法：

基本实现方案

let touchStartX = 0;
let touchEndX = 0;function handleTouchStart(event) {touchStartX = event.changedTouches[0].screenX;
}function handleTouchEnd(event) {touchEndX = event.changedTouches[0].screenX;handleSwipe();
}function handleSwipe() {const threshold = 50; // 最小滑动距离阈值const diffX = touchEndX - touchStartX;if (Math.abs(diffX) > threshold) {if (diffX > 0) {console.log("向右滑动");// 执行右滑操作} else {console.log("向左滑动");// 执行左滑操作}}
}// 添加事件监听
const element = document.getElementById('swipe-area');
element.addEventListener('touchstart', handleTouchStart, false);
element.addEventListener('touchend', handleTouchEnd, false);

更完善的实现（包含滑动速度检测）

let touchStartX = 0;
let touchStartTime = 0;const element = document.getElementById('swipe-area');element.addEventListener('touchstart', (e) => {touchStartX = e.touches[0].clientX;touchStartTime = Date.now();
}, false);element.addEventListener('touchmove', (e) => {e.preventDefault(); // 阻止默认行为，避免页面滚动
}, { passive: false });element.addEventListener('touchend', (e) => {const touchEndX = e.changedTouches[0].clientX;const touchEndTime = Date.now();const diffX = touchEndX - touchStartX;const duration = touchEndTime - touchStartTime;const velocity = Math.abs(diffX) / duration; // 计算滑动速度const threshold = 50; // 最小滑动距离const minVelocity = 0.3; // 最小滑动速度(像素/毫秒)if (Math.abs(diffX) > threshold && velocity > minVelocity) {if (diffX > 0) {console.log("向右滑动");// 执行右滑操作} else {console.log("向左滑动");// 执行左滑操作}}
}, false);

React 组件实现示例

import React, { useRef } from 'react';const SwipeDetector = () => {const touchStartX = useRef(0);const touchStartTime = useRef(0);const handleTouchStart = (e) => {touchStartX.current = e.touches[0].clientX;touchStartTime.current = Date.now();};const handleTouchEnd = (e) => {const touchEndX = e.changedTouches[0].clientX;const touchEndTime = Date.now();const diffX = touchEndX - touchStartX.current;const duration = touchEndTime - touchStartTime.current;const velocity = Math.abs(diffX) / duration;const threshold = 50;const minVelocity = 0.3;if (Math.abs(diffX) > threshold && velocity > minVelocity) {if (diffX > 0) {console.log("向右滑动");// 执行右滑操作} else {console.log("向左滑动");// 执行左滑操作}}};return (<divstyle={{ width: '100%', height: '200px', backgroundColor: '#eee' }}onTouchStart={handleTouchStart}onTouchEnd={handleTouchEnd}>在此区域滑动</div>);
};export default SwipeDetector;

注意事项

阈值选择：threshold 值需要根据实际需求调整，太小可能会误触，太大可能导致滑动不灵敏
性能考虑：避免在touchmove事件中执行复杂操作
兼容性：现代浏览器都支持触摸事件，但要注意某些旧版本浏览器的兼容性
被动事件：如果不需要阻止默认行为，可以设置{ passive: true }提高滚动性能
多指触摸：上述代码只处理单指滑动，如需处理多指手势需要额外逻辑

进阶优化

可以添加垂直滑动检测，并判断是横向还是纵向滑动
可以添加滑动过程中的视觉反馈
可以使用现有的手势库如Hammer.js（https://hammerjs.github.io/）简化开发

<!-- 使用Hammer.js示例 -->
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
<script>const element = document.getElementById('swipe-area');const hammer = new Hammer(element);hammer.on('swipeleft', () => console.log('向左滑动'));hammer.on('swiperight', () => console.log('向右滑动'));
</script>