浅谈移动终端JS触摸事件手势幻灯片事件

现在分享一篇关于触摸，希望教学的文章！

原理：

当你开始一个touchstart事件，得到横坐标startx，此刻手指的坐标的初始位置。

当触发touchmove事件，我们在这个时候得到moveendx和坐标moveendy的手指。最后通过两次坐标差判断手机屏幕上手指滑动的方向。

具体代码如下：


$（体），（touchstart
E.preventDefault（）；
e.originalevent startx =。changedtouches { 0 }。pagex，
初始位置= e.originalevent。changedtouches { 0 }。pagey；
}）；
$（体），（touchmove
E.preventDefault（）；
moveendx = e.originalevent。changedtouches { 0 }。pagex，
moveendy = e.originalevent。changedtouches { 0 }。pagey，
x = moveendx - startx，
Y = moveendy -初始位置；

如果（x > 0）{
警报（左2右）；
}
否则如果（x＜0）{
警报（右2左）；
}
否则如果（y > 0）{
警报（前2个底部）；
}
否则如果（y＜0）{
警报（底部2顶部）；
}
别的{
警报（触摸）；
}
}）；






摘要：在touchmove最终坐标从touchstart起始坐标减去。

x的结果为正，从左到右的手指通过；

x的结果为负，手指从右向左移动；

y的结果是正数，手指是从最上面排出来的；

y的结果为负，手指是从底部到最上面的一排。

坑开始了…

理想是丰满的，那是很瘦的！在实际操作中，手指在上下用力滑动，只要稍微倾斜，只要稍微倾斜，X就会先接管轴的判断，而偏离我们的实际意图。此时你需要添加特殊的判断技术，代码如下所示：


$（体），（touchstart
E.preventDefault（）；
e.originalevent startx =。changedtouches { 0 }。pagex，
初始位置= e.originalevent。changedtouches { 0 }。pagey；
}）；
$（体），（touchmove
E.preventDefault（）；
moveendx = e.originalevent。changedtouches { 0 }。pagex，
moveendy = e.originalevent。changedtouches { 0 }。pagey，
x = moveendx - startx，
Y = moveendy -初始位置；

如果（Math.abs（x）> Math.abs（y）x > 0）{
警报（左2右）；
}
如果（Math.abs（x）> Math.abs（y）x＜0）{
警报（右2左）；
}
如果（Math.abs（y）> Math.abs（x）y > 0）{
警报（前2个底部）；
}
如果（Math.abs（y）> Math.abs（x）y＜0）{
警报（底部2顶部）；
}
别的{
警报（触摸）；
}
}）；


上面的代码中，仍然无法在测试达到预期的效果，此时要注意- $（'body）。高度= 0（这里是一个坑，但有时没有，希望大神指教）

它也应该在此基础上添加到代码中。


无功windowheight = $（窗口）Height（），
美元=（）；
/ / console.log（$（窗口）（的高度））；
/ / console.log（$（'body）（的高度））；
body.css美元（高



在这种情况下，手机的手指已经滑动，滑动，左右滑动。

一些简单的理解，希望大神的建议！

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。