检测触摸设备上的左/右滑动，但允许向上/向下滚动 [英] Detect left/right-swipe on touch-devices, but allow up/down-scrolling

问题描述

我需要检测并对左/右滑动做出反应，但是想要让用户能够滚动相同的元素，所以只要他左右移动他的手指，最大上/下移动对于X像素，它不应该滚动，但是当它超过X时，它应该滚动。

I need to detect and react to left/right-swipes, but want to give the user the ability to scroll on the same element, so as long as he moves his finger only left/right with a maximum up/down movement of X pixels, it should not scroll, but when he exceeds X, it should scroll.

所以我做的是：

var startX, startY, $this = $(this);
function touchmove(event) {
        var touches = event.originalEvent.touches;
        if (touches && touches.length) {
            var deltaX = touches[0].pageX - startX;
            var deltaY = touches[0].pageY - startY;
            if (Math.abs(deltaY) > 50) {
                $this.html('X: ' + deltaX + '<br> Y: ' + deltaY + '<br>TRUE');
                $this.unbind('touchmove', touchmove);
                return true;
            } else {
                $this.html('X: ' + deltaX + '<br> Y: ' + deltaY);
                event.preventDefault();
            }
        }
    }

    function touchstart(event) {
        var touches = event.originalEvent.touches;
        if (touches && touches.length) {
            startX = touches[0].pageX;
            startY = touches[0].pageY;
            $this.bind('touchmove', touchmove);
        }
        //event.preventDefault();
    }

但是我没有恢复滚动if情况的能力...

But I doesn't restore the ability to scroll in the "if" case...

感谢您的任何提示。

推荐答案

我写的我自己的触摸处理程序events.maybe这可以帮助你

I wrote my own touch handler events.maybe this helps you

它检查：

快速点击：'fc'

向左滑动：'swl'

向右滑动：'swr'

向上滑动：'swu'

向下滑动：'swd'

每个check初始化它的通讯事件。但你可以滚动并做你正常做的其他事情。你刚刚有一些新事件。

each check initializes it's correspondent event.but you can scroll and do whatever else you do normally. you just have some new events.

你需要swl swr，我建议使用fc（fastclick）进行点击事件......它比普通点击快得多。

you need swl swr, I aslo suggest to use fc (fastclick) for click events... it's much faster than normal click.

window.onload = function() {
    (function(d) {
        var
            ce = function(e, n) {
                var a = document.createEvent("CustomEvent");
                a.initCustomEvent(n, true, true, e.target);
                e.target.dispatchEvent(a);
                a = null;
                return false
            },
            nm = true,
            sp = {
                x: 0,
                y: 0
            },
            ep = {
                x: 0,
                y: 0
            },
            touch = {
                touchstart: function(e) {
                    sp = {
                        x: e.touches[0].pageX,
                        y: e.touches[0].pageY
                    }
                },
                touchmove: function(e) {
                    nm = false;
                    ep = {
                        x: e.touches[0].pageX,
                        y: e.touches[0].pageY
                    }
                },
                touchend: function(e) {
                    if (nm) {
                        ce(e, 'fc')
                    } else {
                        var x = ep.x - sp.x,
                            xr = Math.abs(x),
                            y = ep.y - sp.y,
                            yr = Math.abs(y);
                        if (Math.max(xr, yr) > 20) {
                            ce(e, (xr > yr ? (x < 0 ? 'swl' : 'swr') : (y < 0 ? 'swu' : 'swd')))
                        }
                    };
                    nm = true
                },
                touchcancel: function(e) {
                    nm = false
                }
            };
        for (var a in touch) {
            d.addEventListener(a, touch[a], false);
        }
    })(document);
    //EXAMPLE OF USE
    var h = function(e) {
        console.log(e.type, e)
    };
    document.body.addEventListener('fc', h, false); // 0-50ms vs 500ms with normal click
    document.body.addEventListener('swl', h, false);
    document.body.addEventListener('swr', h, false);
    document.body.addEventListener('swu', h, false);
    document.body.addEventListener('swd', h, false);
}

在这种情况下，h是我处理每种类型事件的处理程序，我添加了身体的处理者。

in this case h is my handler for every type of event and i add the handlers to the body.

我理解你的问题，你只需要写一下

for what i understand your question you just have to write

YOURELEMENT.addEventListener('swr',YOURSWIPERIGHTFUNCTION,false);
YOURELEMENT.addEventListener('swl',YOURSWIPELEFTFUNCTION,false);

处理多个元素和相同的功能......只需添加一个处理程序。

to handle multiple elements and the same function... just add one handler.

所以，如果你有

<ul id="ul"><li>1</li><li>2</li><li>3</li></ul>

你这样做：

var deleteli=function(e){
    var li=e.target;
    console.log('deleting '+li.textContent);
}
document.getElementById('ul').addEventListener('swl',deleteli,false);

fc& swr

same for fc & swr

ios中有一个错误：不要使用alert（）..它会执行2次。

there is a bug in ios: don't use alert() .. it will execute 2 times.

这篇关于检测触摸设备上的左/右滑动，但允许向上/向下滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！