触摸设备中的操作滑动

Question

我有这个水平旋转组件，我想让它工作的鼠标和滑动事件。一切都很好，除了一点:在触摸设备中，如果用户试图垂直滑动以滚动整个页面，我不希望旋转木马水平滚动。

我要做的是，

鼠标锁定/触屏启动--我停止事件传播以避免页面滚动、项选择等.在第一个移动事件上，在旋转木马上设置一个50 is超时以确定用户是垂直移动还是horizontally.

• If deltaX < deltaY，我停止水平滚动，手动触发touchstart事件，标志表明我在mousedown/touchstart处理程序上手动启动了touchstart事件，我读取了“手动”标志，如果是真的，则从函数返回true，因此所有默认浏览器事件都是true。与页面垂直滚动一样，继续工作。

这不起作用，我所做的一切都是正确的，但浏览器不会拿起并滚动页面。我希望我的解释是正确的，这样你们才能帮我.我没有网上的例子，因为这是我公司的“秘密”项目.

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是容器元素。