jQuery 确定触摸移动的垂直方向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13278087/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Determine vertical direction of a touchmove
提问by madprops
i'm trying to implement a touch listener for tablets to trigger some actions depending whether it touchmoved upwards or downwards.
我正在尝试为平板电脑实现一个触摸监听器来触发一些动作，这取决于它是向上还是向下触摸。
I tried the native listener:
我尝试了本机侦听器：
($document).bind('touchmove', function (e)
{
alert("it worked but i don't know the direction");
});
But i don't know how to determine the direction.
但我不知道如何确定方向。
Is this possible?
这可能吗？
Or do i need to use touchstart/touchend, if I need this can I determine the direction before the touch movement stops?
或者我是否需要使用touchstart/touchend，如果我需要这个，我可以在触摸移动停止之前确定方向吗？
If I can only do this with an external library, what's the best one?
如果我只能使用外部库来做到这一点，那么最好的库是什么？
thanks.
谢谢。
回答by Aureliano Far Suau
I had some issues in Ipad and solved it with two events
我在 Ipad 中遇到了一些问题，并通过两个事件解决了它
var ts;
$(document).bind('touchstart', function (e){
ts = e.originalEvent.touches[0].clientY;
});
$(document).bind('touchend', function (e){
var te = e.originalEvent.changedTouches[0].clientY;
if(ts > te+5){
slide_down();
}else if(ts < te-5){
slide_up();
}
});
回答by Andy
You need to save the last position of the touch, then compare it to the current one.
Rough example:
您需要保存触摸的最后一个位置，然后将其与当前位置进行比较。
粗略的例子：
var lastY;
$(document).bind('touchmove', function (e){
var currentY = e.originalEvent.touches[0].clientY;
if(currentY > lastY){
// moved down
}else if(currentY < lastY){
// moved up
}
lastY = currentY;
});
回答by Juan Herrera
Aureliano's answer seems to be really accurate, but somehow it didn't work for me, so giving him the credits I decided to improve his answer with the following:
Aureliano 的答案似乎非常准确，但不知何故它对我不起作用，所以给他学分我决定用以下方法改进他的答案：
var ts;
$(document).bind('touchstart', function(e) {
ts = e.originalEvent.touches[0].clientY;
});
$(document).bind('touchmove', function(e) {
var te = e.originalEvent.changedTouches[0].clientY;
if (ts > te) {
console.log('down');
} else {
console.log('up');
}
});
I simply changed the 'touchend'event for 'touchmove'
我只是将'touchend'事件更改为'touchmove'
回答by Frank Snoek
I have created a script that will ensure an element within your document will scroll without scrolling anything else, including the body. This works in a browser as well as a mobile device / tablet.
我已经创建了一个脚本，可以确保您的文档中的元素将滚动而不滚动任何其他内容，包括正文。这适用于浏览器以及移动设备/平板电脑。
// desktop scroll
$( '.scrollable' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
this.scrollTop += delta * -1;
e.preventDefault();
});
var lastY;
var currentY;
// reset touch position on touchstart
$('.scrollable').bind('touchstart', function (e){
var currentY = e.originalEvent.touches[0].clientY;
lastY = currentY;
e.preventDefault();
});
// get movement and scroll the same way
$('.scrollable').bind('touchmove', function (e){
var currentY = e.originalEvent.touches[0].clientY;
delta = currentY - lastY;
this.scrollTop += delta * -1;
lastY = currentY;
e.preventDefault();
});
回答by manish
This solution takes into account change in directions which the current answers does not. The solution below also takes care of touch sensitivity; this when the user is moving in one direction but on touch end the users finger nudges in a different direction messing up the actual direction.
此解决方案考虑了当前答案未考虑的方向变化。下面的解决方案还考虑了触摸灵敏度；当用户朝一个方向移动但在触摸端时，用户的手指会朝不同的方向轻推，从而弄乱了实际方向。
var y = 0; //current y pos
var sy = y; //previous y pos
var error = 5; //touch sensitivity, I found between 4 and 7 to be good values.
function move(e) {
//get current y pos
y = e.pageY;
//ingnore user jitter
if (Math.abs(y - sy) > error) {
//find direction of y
if (y > sy) {
//move down
} else {
//move up
}
//store current y pos
sy = y;
}
}
