Jquery 工具 触摸水平仅禁用垂直触摸

Question

我有 jquery 工具滚动器...我喜欢它只为 swipeLeft swipeRight 实现触摸选项。

当我使用 touch: true 时，它​​也会在向上/向下滑动时旋转..

我按照此处的说明进行操作:

jQuery Tools Scrollable on touch disable vertical scroll

这里:

http://awardwinningfjords.com/2010/09/22/handling-touch-events-in-jquery-tools-scrollable.html

但似乎都不起作用..有什么想法吗？我的 fiddle /演示如下供引用

fiddle: http://jsfiddle.net/mmp2m/7/

demo: http://jsfiddle.net/mmp2m/7/show

谢谢

Answer 1

如果您使用的唯一控件是可滚动，那么您可以从 here 编辑它的源代码修复该行为或根据您认为合适的情况进行调整。

我修改了fiddle您已发布在 JavaScript 代码部分中包含 Scrollable 控件的代码。

在控件代码中添加的行是在以下代码段末尾带有注释 //added 的行:

    // touch event
    if (conf.touch) {
        var touch = {};

        itemWrap[0].ontouchstart = function(e) {
            var t = e.touches[0];
            touch.x = t.clientX;
            touch.y = t.clientY;
        };

        itemWrap[0].ontouchmove = function(e) {

            // only deal with one finger
            if (e.touches.length == 1 && !itemWrap.is(":animated")) {            
                var t = e.touches[0],
                     deltaX = touch.x - t.clientX,
                     deltaY = touch.y - t.clientY,
                     absX = Math.abs(deltaX),                              // added
                     absY = Math.abs(deltaY);                              // added

                // Only consider the event when the delta in the
                // desired axis is greater than the one in the other.
                if(vertical && absY > absX || !vertical && absX > absY)    // added
                    self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();

                e.preventDefault();
            }
        };
    }

我已经在 Android 中使用 native 浏览器和 Opera 浏览器尝试过此操作，并且似乎按预期工作。