Javascript 向网页添加向左/向右滑动，但使用默认向上/向下滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5304340/
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
Add swipe left/right to web page, but use default swipe up/down
提问by Vector Instructional Design
I'm using padilicious to detect swiping gestures for web pages that will be viewed on iOS and desktops. It works great to swipe left/right for previous and next pages of my site. However, it seems to override the default behavior in iPhone/iPad when swiping up/down. I'd like an up/down swipe to scroll the page, which it does when I don't have padilicious running. Just having the code ignore up/down swipes doesn't seem to work.
我正在使用 padilicious 来检测将在 iOS 和桌面上查看的网页的滑动手势。向左/向右滑动我网站的上一页和下一页非常有用。但是，当向上/向下滑动时，它似乎会覆盖 iPhone/iPad 中的默认行为。我想要向上/向下滑动来滚动页面，当我没有运行时它会这样做。只是让代码忽略向上/向下滑动似乎不起作用。
The section of padilicious code that I've been
我去过的Padilicious代码部分
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == 'left' ) {
document.location = document.getElementById('nextPage').href;
} else if ( swipeDirection == 'right' ) {
document.location = document.getElementById('prevPage').href;
} else if ( swipeDirection == 'up' ) {
return;
} else if ( swipeDirection == 'down' ) {
return;
}
}
采纳答案by user25992
Remove event.preventDefault();from all functions. In the function processingRoutine() {}add event.preventDefault();for what you want.
event.preventDefault();从所有功能中删除。在函数中processingRoutine() {}添加event.preventDefault();你想要的。
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == 'left' ) {
// REPLACE WITH YOUR ROUTINES
//swipedElement.style.backgroundColor = 'orange';
event.preventDefault();
} else if ( swipeDirection == 'right' ) {
// REPLACE WITH YOUR ROUTINES
//swipedElement.style.backgroundColor = 'green';
event.preventDefault();
} else if ( swipeDirection == 'up' ) {
// REPLACE WITH YOUR ROUTINES
//swipedElement.style.backgroundColor = 'maroon';
} else if ( swipeDirection == 'down' ) {
// REPLACE WITH YOUR ROUTINES
//swipedElement.style.backgroundColor = 'purple';
}
}
回答by konsolenfreddy
there's a jquery library, which does the job (by not providing up/down methods): http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture
有一个 jquery 库，它可以完成这项工作（通过不提供向上/向下方法）：http: //plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture
回答by Pankaj Tyagi
Padilicious seems to be preventing default in all cases. See the call to event.preventDefault() in all cases.
Padilicious 似乎在所有情况下都在防止默认。请参阅所有情况下对 event.preventDefault() 的调用。
function touchStart(event,passedName) {
// disable the standard ability to select the touched object
event.preventDefault();
You will have to change start, stop, ... handlers to not call preventDefault() in up and down cases.
您必须更改 start、stop、... 处理程序，以便在上下情况下不调用 preventDefault()。
回答by Graham Conzett
I'm not familiar with padilicious, but check and see if the ontouchmove="BlockMove(event);"is set anywhere, that prevents the page from scrolling like you describe, I'm not sure how you would get it to keep the vertical scrolling but swipe horizontally.
我不熟悉 padilicious，但检查并查看是否在ontouchmove="BlockMove(event);"任何地方设置，以防止页面像您描述的那样滚动，我不确定您如何让它保持垂直滚动但水平滑动。
Edit: I've since found a really helpful overview for doing "native" feel iOS web apps, it might not be exactly what you're looking for, but could provide you with another avenue of approach to your problem. Check it out: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
编辑：从那以后，我发现了一个非常有用的概述，用于制作“原生”感觉的 iOS 网络应用程序，它可能不是您正在寻找的内容，但可以为您提供另一种解决问题的途径。检查一下：http: //matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
回答by Romain
I changed the script, this work:
我改变了脚本，这项工作：
// TOUCH-EVENTS SINGLE-FINGER SWIPE-SENSING JAVASCRIPT
// Courtesy of PADILICIOUS.COM and MACOSXAUTOMATION.COM
// this script can be used with one or more page elements to perform actions based on them being swiped with a single finger
var triggerElementID = null; // this variable is used to identity the triggering element
var fingerCount = 0;
var startX = 0;
var startY = 0;
var curX = 0;
var curY = 0;
var deltaX = 0;
var deltaY = 0;
var horzDiff = 0;
var vertDiff = 0;
var minLength = 72; // the shortest distance the user may swipe
var swipeLength = 0;
var swipeAngle = null;
var swipeDirection = null;
// The 4 Touch Event Handlers
// NOTE: the touchStart handler should also receive the ID of the triggering element
// make sure its ID is passed in the event call placed in the element declaration, like:
// <div id="picture-frame" ontouchstart="touchStart(event,'picture-frame');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">
function touchStart(event,passedName) {
// disable the standard ability to select the touched object
//event.preventDefault();
// get the total number of fingers touching the screen
fingerCount = event.touches.length;
// since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
// check that only one finger was used
if ( fingerCount == 1 ) {
// get the coordinates of the touch
startX = event.touches[0].pageX;
startY = event.touches[0].pageY;
// store the triggering element ID
triggerElementID = passedName;
} else {
// more than one finger touched so cancel
touchCancel(event);
}
}
function touchMove(event) {
//event.preventDefault();
if ( event.touches.length == 1 ) {
curX = event.touches[0].pageX;
curY = event.touches[0].pageY;
} else {
touchCancel(event);
}
}
function touchEnd(event) {
//event.preventDefault();
// check to see if more than one finger was used and that there is an ending coordinate
if ( fingerCount == 1 && curX != 0 ) {
// use the Distance Formula to determine the length of the swipe
swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
// if the user swiped more than the minimum length, perform the appropriate action
if ( swipeLength >= minLength ) {
caluculateAngle();
determineSwipeDirection();
processingRoutine();
touchCancel(event); // reset the variables
} else {
touchCancel(event);
}
} else {
touchCancel(event);
}
}
function touchCancel(event) {
// reset the variables back to default values
fingerCount = 0;
startX = 0;
startY = 0;
curX = 0;
curY = 0;
deltaX = 0;
deltaY = 0;
horzDiff = 0;
vertDiff = 0;
swipeLength = 0;
swipeAngle = null;
swipeDirection = null;
triggerElementID = null;
}
function caluculateAngle() {
var X = startX-curX;
var Y = curY-startY;
var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
var r = Math.atan2(Y,X); //angle in radians (Cartesian system)
swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
if ( swipeAngle < 0 ) { swipeAngle = 360 - Math.abs(swipeAngle); }
}
function determineSwipeDirection() {
if ( (swipeAngle <= 45) && (swipeAngle >= 0) ) {
swipeDirection = 'left';
} else if ( (swipeAngle <= 360) && (swipeAngle >= 315) ) {
swipeDirection = 'left';
} else if ( (swipeAngle >= 135) && (swipeAngle <= 225) ) {
swipeDirection = 'right';
}
/* else if ( (swipeAngle > 45) && (swipeAngle < 135) ) {
swipeDirection = 'down';
} else {
swipeDirection = 'up';
}*/
}
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == 'left' ) {
// REPLACE WITH YOUR ROUTINES
event.preventDefault();
swipedElement.style.backgroundColor = 'orange';
} else if ( swipeDirection == 'right' ) {
// REPLACE WITH YOUR ROUTINES
event.preventDefault();
swipedElement.style.backgroundColor = 'green';
}
/*else if ( swipeDirection == 'up' ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = 'maroon';
} else if ( swipeDirection == 'down' ) {
// REPLACE WITH YOUR ROUTINES
swipedElement.style.backgroundColor = 'purple';
}*/
}
