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..

我在这里遵循了指示:

jQuery Tools触摸时可滚动禁用垂直滚动

在这里:

http://awardwinningfjords .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.

我修改了您发布的小提琴，以将 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屋！