Question

我的webapp上的滑动代码出现问题。使用单个手指，页面之间的滑动可以完美地工作，但是，当我用第二个手指触摸并与第一个手指同时移动时，应用程序会对要听哪个手指感到困惑。这通常会导致事情出错。我怎样才能确保应用程序所关注的唯一触摸事件是由第一次手指触摸触发的事件？

我的滑动插件的代码如下所示：

(function($) {

        $.fn.movement = function(options) {


    var defaults = {
        threshold: { x: 150, y: 15 },
        mouseUp: function() {},
        mouseMove: function() { },
        mouseDown: function() { },
        scrollStart: function() { },
        scrollStop: function() { },
        scrollMove: function() { }
    };



    var options = $.extend(defaults, options);

    if (!this) return false;


    //alert(this.attr("id"));
    return this.each(function() {

        var me = $(this)

        // Private variables for each element
        var originalCoord = { x: 0, y: 0 }
        var lastCoord = {x: 0, y: 0 }
        var finalCoord = { x: 0, y: 0 }
        var velocity = { x: 0, y: 0 }
       function touchMove(event) {
                event.preventDefault();
                finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates
                finalCoord.y = event.targetTouches[0].pageY
                defaults.scrollMove(finalCoord);
                defaults.mouseMove(finalCoord,activeDirection());
        }

        function touchEnd(event) {
            var direction = stoppedDirection();
            defaults.scrollStop(finalCoord);
            defaults.mouseUp(velocity,direction);           
        }

        function touchStart(event) {
            originalCoord.x = event.targetTouches[0].pageX
            originalCoord.y = event.targetTouches[0].pageY
            lastCoord.x = originalCoord.x
            lastCoord.y = originalCoord.y
            finalCoord.x = originalCoord.x
            finalCoord.y = originalCoord.y
            defaults.scrollStart(originalCoord);
        }
        function activeDirection() {
            var direction = [];
            var vx = lastCoord.x - finalCoord.x;
            var vy = lastCoord.y - finalCoord.y;
            if (vy < 0 && (Math.abs(vy) > defaults.threshold.y))
                direction.push('down');
            else if (vy > 0 && (Math.abs(vy) > defaults.threshold.y))
                direction.push('up');
            if (vx < 0 && (Math.abs(vx) > defaults.threshold.x))
                direction.push('right');
            else if (vx > 0 && (Math.abs(vx) > defaults.threshold.x))
                direction.push('left');
            return direction;
        }

        function stoppedDirection() {
            var direction = [];
            velocity.x = originalCoord.x - finalCoord.x;
            velocity.y = originalCoord.y - finalCoord.y;
            if (velocity.y < 0 && (Math.abs(velocity.y) > defaults.threshold.y))
                direction.push('down');
            else if (velocity.y > 0 && (Math.abs(velocity.y) > defaults.threshold.y))
                direction.push('up');
            if (velocity.x < 0 && (Math.abs(velocity.x) > defaults.threshold.x))
                direction.push('right');
            else if (velocity.x > 0 && (Math.abs(velocity.x) > defaults.threshold.x))
                direction.push('left');
            return direction;
        }
        this.addEventListener("touchstart", touchStart, false);
        this.addEventListener("touchmove", touchMove, false);
        this.addEventListener("touchend", touchEnd, false);
        this.addEventListener("touchcancel", touchCancel, false);
       });
  };

})(jQuery);

Answer 1

为了更好地控制触摸事件，jQuery Mobile可能是一个不错的选择。

http://jquerymobile.com/

Answer 2

每个手指触发自己的触摸事件。所以：

// put first finger down
touchstart,
// move that finger
touchmove, touchmove, touchmove, ...
// put second finger down
touchstart,
// move both fingers
touchmove, touchmove, touchmove, ...
// lift either finger
touchend,
// lift last finger
touchend.

我猜你现在开始了解如何跟踪第一根手指。问题是：当两个手指移动时，如何判断哪个touchmove是哪个手指？答案是identifier对象下的Touch属性（用于获取pageX和pageY的对象）。

因此，当第一根手指向下时，记录下来identifier。对于即将发生的触摸事件，请遍历targetTouches（或仅changeTouches）并查找具有相同Touch的{{1}}对象。如果identifier中没有此Touch个对象，我们什么也不做。我们不关心其他changeTouches个对象。

最后，您需要考虑如何处理第一根手指。当第一根手指抬起而屏幕上还有其他手指时，第二根手指是否会接管第一根手指的动力进行滚动？我们是否需要将所有手指从屏幕上抬起以重置第一根手指的电源？它取决于你。

防止Webapp中的其他接触

2 个答案: