Question

我有这个水平旋转木马组件，我想让它适用于鼠标和滑动事件。一切都运行正常，除了一点：在触摸设备中，如果用户试图垂直滑动以滚动整个页面，我不希望旋转木马水平滚动。

我在做什么，

on mousedown / touchstart - 我阻止事件传播以避免页面滚动，项目选择等...
在第一个移动事件中，在旋转木马上，我设置50ms超时以确定用户是垂直还是水平移动。
如果deltaX＆lt; deltaY，我停止水平滚动，手动触发touchstart事件，标志表示我手动触发了
在我的mousedown / touchstart处理程序上，我读到了＃34; mannually＆＃34;标志，如果它是真的，我从我的函数返回true，所以所有默认的浏览器事件，如页面垂直滚动，继续工作。

这不起作用，我所做的一切都正确响应，但浏览器没有拿起并滚动页面。我希望我能正确地解释自己，所以你们可以帮助我......我没有在线的例子，因为这是一个秘密＆＃34;我公司的项目...

由于

Answer 1

我试图和你做同样的事情（是吗？）。关键是检查touchmove当前触摸和最后一次触摸是否垂直于水平。如果触摸更多地从左到右或从右到左，则阻止事件的默认，否则忽略它。这是我最后写的。希望它适合你！

var gestures = function() {
    var self = this,
    coords = {
        startX: null,
        startY: null,
        endX: null,
        endY: null
    };

    self.$el.on('touchstart', function(e) {
        coords.startX = e.originalEvent.targetTouches[0].clientX;
        coords.startY = e.originalEvent.targetTouches[0].clientY;
        coords.endX = coords.startX;
        coords.endY = coords.startY;
    });

    self.$el.on('touchmove', function(e) {
        var newX = e.originalEvent.targetTouches[0].clientX,
            newY = e.originalEvent.targetTouches[0].clientY,
            absX = Math.abs(coords.endX - newX),
            absY = Math.abs(coords.endY - newY);

        // If we've moved more Y than X, we're scrolling vertically
        if (absX < absY) {
            return;
        }

        // Prevents the page from scrolling left/right
        e.preventDefault();

        coords.endX = newX;
        coords.endY = newY;
    });

    self.$el.on('touchend', function(e) {
        var swipe = {},
            deltaX = coords.startX - coords.endX,
            deltaY = coords.startY - coords.endY,
            absX = Math.abs(deltaX),
            absY = Math.abs(deltaY);

        swipe.distance = (absX > absY) ? absX : absY;
        swipe.direction = (absX < absY) ?
            (deltaY < 0 ? 'down' : 'up') :
            (deltaX < 0 ? 'right' : 'left');

        // console.log(swipe.direction + ' ' + swipe.distance + 'px');

        // If we have a swipe of > 50px, let's use it!
        if (swipe.distance > 50) {
            if (swipe.direction === 'left') {
                self.advance();
            } else if (swipe.direction === 'right') {
                self.retreat();
            }
        }

    });
};

this是我的滑块对象，$el是容器元素。

处理触摸设备中的滑动

1 个答案: