独立的jQuery“触摸”方法？答案

【问题标题】：Standalone jQuery "touch" method?独立的jQuery“触摸”方法？
【发布时间】：2010-04-23 18:42:20
【问题描述】：

因此，我正在寻找实现我编写的插件的功能，以从具有触摸功能的互联网设备（如 iPhone、iPad 或 Android）读取触摸“滑动”。

那里有什么吗？我不是在寻找像 jQtouch 这样完整的东西，但我正在考虑对我需要的代码进行逆向工程。

对解决此问题的最佳方法有什么建议吗？是否已经提供了 sn-p 代码？

附录：事后我意识到解决方案不会严格地是 jQuery，因为我很确定没有任何内置方法可以处理这个问题。我希望标准 Javascript 能够在答案中找到自己。

【问题讨论】：

【解决方案1】：

(function($) {
$.fn.swipe = function(options) {
    // Default thresholds & swipe functions
    var defaults = {
        threshold: {
            x: 30,
            y: 10
        },
        swipeLeft: function() { alert('swiped left') },
        swipeRight: function() { alert('swiped right') },
        preventDefaultEvents: true
    };

    var options = $.extend(defaults, options);

    if (!this) return false;

    return this.each(function() {

        var me = $(this)

        // Private variables for each element
        var originalCoord = { x: 0, y: 0 }
        var finalCoord = { x: 0, y: 0 }

        // Screen touched, store the original coordinate
        function touchStart(event) {
            console.log('Starting swipe gesture...')
            originalCoord.x = event.targetTouches[0].pageX
            originalCoord.y = event.targetTouches[0].pageY
        }

        // Store coordinates as finger is swiping
        function touchMove(event) {
            if (defaults.preventDefaultEvents)
                event.preventDefault();
            finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates
            finalCoord.y = event.targetTouches[0].pageY
        }

        // Done Swiping
        // Swipe should only be on X axis, ignore if swipe on Y axis
        // Calculate if the swipe was left or right
        function touchEnd(event) {
            console.log('Ending swipe gesture...')
            var changeY = originalCoord.y - finalCoord.y
            if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {
                changeX = originalCoord.x - finalCoord.x

                if(changeX > defaults.threshold.x) {
                    defaults.swipeLeft()
                }
                if(changeX < (defaults.threshold.x*-1)) {
                    defaults.swipeRight()
                }
            }
        }

        // Swipe was canceled
        function touchCancel(event) { 
            console.log('Canceling swipe gesture...')
        }

        // Add gestures to all swipable areas
        this.addEventListener("touchstart", touchStart, false);
        this.addEventListener("touchmove", touchMove, false);
        this.addEventListener("touchend", touchEnd, false);
        this.addEventListener("touchcancel", touchCancel, false);

    });
};
})(jQuery);


$('.swipe').swipe({
 swipeLeft: function() { $('#someDiv').fadeIn() },
 swipeRight: function() { $('#someDiv').fadeOut() },
})

这就是你检测 iphone 的方式

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
     if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "path to iphone page";
}

【讨论】：

太棒了！我要试试这个，然后更新帖子，希望有一个选择的答案。
工作出色。我对其进行了一些更改，以便可以通过我的插件对其进行初始化，但这是一段很棒的代码。非常感谢！
jQuery 的滑动插件可以在这里找到plugins.jquery.com/project/swipe
jSwipe 和 James Lin 的解决方案都适用于该用例 - “我想检测超过给定长度的触摸和拖动”。然而，这并不能完全模拟原生 iOS/Android 行为，这要复杂得多。一方面，每个解决方案都会取消触摸移动的默认行为——如果您希望“滑动”元素在滑动（即平移）时移动而不是等待滑动结束怎么办？或者，如果短而快速的滑动应该等于更长、更慢的滑动？触摸手势更多的是关于惯性和动量，而不仅仅是运动。仍然缺少一个好的解决方案。
有谁知道这是否也适用于Android？（我自己没有安卓设备来测试它）

【解决方案2】：

http://www.netcu.de/jquery-touchwipe-iphone-ipad-library 上还有 jQuery.touchwipe

【讨论】：

【解决方案3】：

最小和最 jQuery-esque 的解决方案在这里：https://github.com/eikes/jquery.swipe-events.js

【讨论】：