jQuery Touchwipe - 仅禁用 1 个轴的默认滚动

Question

我正在使用 jQuery Touchwipe 插件: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

使用 PreventDefaultEvents: true 可以禁用 iPhone 上的默认拖动行为。然而，我需要的是仅禁用 1 轴的默认行为。我需要用户能够拖动来上下滚动，但是需要禁用从左向右拖动，并且我的函数将会触发。谢谢

Answer 1

我有同样的需求，并扩展了 touchwipe 插件，将事件传递给wipeLeft、wipeRight、wipeUp 和wipeDown 回调。这允许我在配置中设置 preventDefaultEvents: false ，然后在需要时在我的特定回调中设置第一件事:e.preventDefault();。

我将修改发送给插件作者。

修改后的插件:

(function($) {
$.fn.touchwipe = function(settings) {
    var config = {
            min_move_x: 20,
            min_move_y: 20,
            wipeLeft: function(e) { },
            wipeRight: function(e) { },
            wipeUp: function(e) { },
            wipeDown: function(e) { },
            preventDefaultEvents: true
    };

    if (settings) $.extend(config, settings);

    this.each(function() {
        var startX;
        var startY;
        var isMoving = false;

        function cancelTouch() {
            this.removeEventListener('touchmove', onTouchMove);
            startX = null;
            isMoving = false;
        }

        function onTouchMove(e) {
            if(config.preventDefaultEvents) {
                e.preventDefault();
            }
            if(isMoving) {
                var x = e.touches[0].pageX;
                var y = e.touches[0].pageY;
                var dx = startX - x;
                var dy = startY - y;
                if(Math.abs(dx) >= config.min_move_x) {
                    cancelTouch();
                    if(dx > 0) {
                        config.wipeLeft(e);
                    }
                    else {
                        config.wipeRight(e);
                    }
                }
                else if(Math.abs(dy) >= config.min_move_y) {
                        cancelTouch();
                        if(dy > 0) {
                            config.wipeDown(e);
                        }
                        else {
                            config.wipeUp(e);
                        }
                    }
            }
        }

        function onTouchStart(e)
        {
            if (e.touches.length == 1) {
                startX = e.touches[0].pageX;
                startY = e.touches[0].pageY;
                isMoving = true;
                this.addEventListener('touchmove', onTouchMove, false);
            }
        }
        if ('ontouchstart' in document.documentElement) {
            this.addEventListener('touchstart', onTouchStart, false);
        }
    });

    return this;
};

})(jQuery);