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

问题描述

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

Im using the jQuery Touchwipe plugin:http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

with preventDefaultEvents:true，可以禁用iPhone上的默认拖动行为.但是，我需要的是仅在1轴上禁用默认的行为.我需要用户能够上下滚动来拖动，但是需要禁用从左向右拖动，而我的功能会触发.谢谢

With preventDefaultEvents: true its possible to dissable the default dragging behavour on an iPhone. However what I need is to dissable the default behavious in 1 axis only. I need users to be able to drag to scroll up and down, but dragging from left to right needs to be disabled and my function will fire instead. Thanks

推荐答案

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

I had the same need and extended the touchwipe plugin to pass the event to the wipeLeft, wipeRight, wipeUp and wipeDown callbacks. That allows me to set preventDefaultEvents: false in config and then in my specific callbacks if needed, do first thing: e.preventDefault();.

我已将修改内容发送给插件作者.

I sent modifications to plugin author.

修改后的插件:

(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轴的默认滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！