logo标签列表

在网页中添加左右滑动功能，但使用默认的上下滑动。

javascripthtmliosswipe
6
我正在使用padilicious来检测iOS和桌面上查看的网页的滑动手势。它很好地实现了在我的网站上向左/向右滑动以查看前一页和后一页。然而，在iPhone/iPad上向上/向下滑动时，它似乎覆盖了默认行为。我希望向上/向下滑动可以滚动页面，当我没有运行padilicious时，它可以实现这一点。仅仅让代码忽略向上/向下滑动似乎不起作用。
我已经找到了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;
    }


}
5个回答
5

移除所有函数中的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';
    }
}
1
这在安卓原生浏览器和火狐浏览器上可以运行，但在谷歌浏览器上不行。同时需要注意：必须传递事件。 - Gunnar Bernstein
2
谢谢，这看起来是一个不错的jquery选项用于滑动。但是，它有相同的问题。请查看http://www.netcu.de/jquery-touchwipe-iphone-ipad-library。在图像div中向左/右滑动将更改图片，但向上/下滑动不会做任何事情，包括滚动。我希望当有人在网站的内容div中向上/下滑动时能够滚动，并且在向左/右滑动时可以前进/后退。在内容div之外滑动正常（默认行为）。 - Vector Instructional Design
1

Padilicious似乎在所有情况下都阻止了默认操作。请查看所有情况下的event.preventDefault()调用。

function touchStart(event,passedName) {
  // disable the standard ability to select the touched object
  event.preventDefault();

您需要更改启动、停止等处理程序，以便在向上和向下的情况下不调用preventDefault()。

1

我不熟悉padilicious，但请检查并查看是否在任何地方设置了ontouchmove="BlockMove(event);"，这会防止页面像您描述的那样滚动，我不确定如何使其保持垂直滚动但水平滑动。

编辑：我后来发现了一个非常有用的概述，可以实现“本地”感觉的iOS Web应用程序，这可能不是您要寻找的确切内容，但可能为解决问题提供另一种途径。看看这个：http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

代码中不包括 BlockMove(event)，但我很高兴了解到这一点，谢谢。 - Vector Instructional Design
我后来在我的回复中编辑了一个链接，你可能会觉得有用。 - Graham Conzett
谢谢！这段代码很有趣：`var IsiPhone = navigator.userAgent.indexOf("iPhone") != -1 ; var IsiPod = navigator.userAgent.indexOf("iPod") != -1 ; var IsiPad = navigator.userAgent.indexOf("iPad") != -1 ; var IsiPhoneOS = IsiPhone || IsiPad || IsiPod ;` - Vector Instructional Design
0
我修改了脚本，现在它可以工作：
    // 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';
    }*/
}
1
这将不再起作用，因为它根本无法检测到刷卡。 - ojsglobal
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接