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

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

1 个答案: