Question

在没有jQuery Mobile或外部库的情况下，是否有人有代码用于检测滑动 - 而不是点击 - 纯jQuery？

我一直在关注the TouchSwipe source，但它有很多额外的代码。我所需要的只是一个布尔值 - 是一个滑动或点击的事件 - 而不是方向，位置等。

我无法在我的项目中使用外部库，我认为这将是Stack Overflow上非常有用的简单代码。

Answer 1

这个不太长，你可以拿出你不需要的东西

/*
 * jSwipe - jQuery Plugin
 * http://plugins.jquery.com/project/swipe
 * http://www.ryanscherf.com/demos/swipe/
 *
 * Copyright (c) 2009 Ryan Scherf (www.ryanscherf.com)
 * Licensed under the MIT license
 *
 * $Date: 2009-07-14 (Tue, 14 Jul 2009) $
 * $version: 0.1.2
 * 
 * This jQuery plugin will only run on devices running Mobile Safari
 * on iPhone or iPod Touch devices running iPhone OS 2.0 or later. 
 * http://developer.apple.com/iphone/library/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5
 */
(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') }
        };

        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) {
                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 started
            function touchStart(event) {
                //console.log('Starting swipe gesture...')
                originalCoord.x = event.targetTouches[0].pageX
                originalCoord.y = event.targetTouches[0].pageY

                finalCoord.x = originalCoord.x
                finalCoord.y = originalCoord.y
            }

            // 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);

Answer 2

这是一个非常基本的问题。我有一个依赖项，它是一个插件，但它没有TouchSwipe那么多的开销，我不认为。

http://stephband.info/jquery.event.swipe/

在没有外部库的情况下检测滑动事件？

2 个答案: