Jquery 工具触摸水平仅禁用垂直触摸 [英] Jquery Tools Touch horizontal only disable vertical touch

问题描述

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

I have jquery tools scroller... I like it to have touch option implemented for swipeLeft swipeRight only.

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

When I use touch: true, it does rotates when swipeUp/Down as well..

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

I followed instructions here:

jQuery 工具可在触摸时滚动禁用垂直滚动

这里:

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

但似乎都不起作用..有什么想法吗?我的小提琴/演示如下供参考

but none seem to work.. any ideas? my Fiddle/demo is below for reference

小提琴:http://jsfiddle.net/mmp2m/7/

演示:http://jsfiddle.net/mmp2m/7/show

谢谢

推荐答案

如果您使用的唯一控件是 Scrollable，那么您可以从 此处 修复该行为或根据您的需要进行调整.

If the only control you are using is Scrollable then you could edit the source code for it from here to fix that behaviour or adapt it as you see fit.

我修改了您发布的 fiddle 以将 Scrollable 控件的代码包含在JavaScript 代码部分.

I modified the fiddle you had posted to include the code for the Scrollable control in the JavaScript code section.

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

The lines added in the code for the control are the ones with the comment // added at the end in the following snippet:

    // 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 中使用本机浏览器和 Opera 浏览器尝试过此操作，并且似乎按预期工作.

I've tried this in Android with the native and Opera browsers and seems to work as expected.

这篇关于Jquery 工具触摸水平仅禁用垂直触摸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！