移动端JS触摸滑动事件实现与常见坑点解析
本文详解移动端JS中利用touchstart和touchmove事件实现手势滑动的原理。通过计算坐标差值判断滑动方向，并重点解析了因手指非直线滑动导致的误判问题及解决方案。同时指出body高度为0时的兼容陷阱，提供完整的代码实现与修正策略。
移动端触摸滑动事件概述
本文分享关于移动端触摸事件的实现方案，欢迎交流指正。
核心原理如下：
滑动方向判断原理与基础代码
在触发touchstart事件时，记录手指当前的横坐标startX和纵坐标startY。当触发touchmove事件时，获取此时手指的横坐标moveEndX和纵坐标moveEndY。通过计算这两组坐标的差值，即可判断手指在手机屏幕上的滑动方向。具体实现代码如下：
$("body").on("touchstart", function(e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if ( X > 0 ) {
alert("left 2 right");
}
else if ( X < 0 ) {
alert("right 2 left");
}
else if ( Y > 0) {
alert("top 2 bottom");
}
else if ( Y < 0 ) {
alert("bottom 2 top");
}
else{
alert("just touch");
}
});
基本逻辑是：用touchmove结束时的坐标减去touchstart起始时的坐标。
解决滑动倾斜误判问题
若X轴差值为正数，表示手指从左向右滑动；若为负数，表示从右向左滑动。若Y轴差值为正数，表示从上向下滑动；若为负数，表示从下向上滑动。然而实际应用中存在隐患：手指滑动很难保持绝对垂直或水平，只要存在微小倾斜，X轴的判断往往优先于Y轴，导致结果与用户实际操作意图不符。为此需要引入更严谨的判断逻辑，代码如下：
$("body").on("touchstart", function(e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
alert("left 2 right");
}
else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
alert("right 2 left");
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
alert("top 2 bottom");
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
alert("bottom 2 top");
}
else{
alert("just touch");
}
});修复Body高度为0的兼容陷阱
上述代码在测试中可能仍未达到预期效果。需注意一个常见现象：$('body').height可能等于0（这是一个潜在陷阱，虽不总是出现，但需警惕）。因此，还需补充以下代码进行修复：
var windowHeight = $(window).height(),
$body = $("body");
// console.log($(window).height());
// console.log($('body').height());
$body.css("height", windowHeight);
经过上述处理，即可实现移动端手指的上滑、下滑、左滑和右滑操作。
以上为初步理解，恳请专家批评指正。
本文内容仅供参考，希望能为您的学习提供助力，欢迎继续支持本站。
JS监听滚动事件：回到顶部按钮的显示与隐藏逻辑
2026-11-05 16:19:37
JavaScript怎么读写LocalStorage与SessionStorage
2026-11-05 15:40:11
anime.js 与 GSAP 对比：轻量级项目该怎么选择动画库
2026-11-05 11:24:55
flv.js 与 hls.js 在直播场景下的选型对比
2026-11-05 08:18:52
JavaScript能做什么？前端开发中的作用与应用场景解析
2026-11-04 23:17:54