防止Webapp中的额外接触 [英] Preventing Additional Touches in Webapp

问题描述

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

I'm having a problem with the swipe code on my webapp. Using a single finger, the swiping between pages works flawlessly, however, when I touch with a second finger and move it at the same time as the first, the app becomes confused about which finger to listen to. This generally causes things to go very wrong. How can I go about ensuring that the only touch events the app respects are those triggered by the first finger touch?

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

The code for my swipe plugin looks like this:

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

推荐答案

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

For having better control on the Touch Events, jQuery Mobile can be a good option.

http://jquerymobile.com/

这篇关于防止Webapp中的额外接触的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！