javascript - 防止Webapp中的其他接触

我的Web应用程序上的滑动代码有问题。使用单根手指，页面之间的滑动就可以完美地进行，但是，当我用第二根手指触摸并与第一根手指同时移动时，该应用程序对于要听哪根手指感到困惑。这通常会导致事情变得非常错误。我该如何确保应用程序尊重的唯一触摸事件是由第一指触摸触发的事件？

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

(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);

最佳答案

为了更好地控制Touch Events，jQuery Mobile是一个不错的选择。

http://jquerymobile.com/