3

Web アプリケーションのスワイプ コードに問題があります。1 本の指を使用すると、ページ間のスワイプは問題なく機能しますが、2 本目の指で触れて最初の指と同時に動かすと、アプリはどの指を聞くべきか混乱します。これにより、一般的に物事が非常にうまくいかなくなります。アプリが尊重する唯一のタッチイベントが最初の指のタッチによってトリガーされるものであることを確認するにはどうすればよいですか?

私のスワイププラグインのコードは次のようになります。

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

2 に答える 2

1

タッチ イベントをより適切に制御するには、jQuery Mobile が適しています。

http://jquerymobile.com/

于 2012-04-10T06:13:07.190 に答える
0

各指は、独自のタッチ イベントをトリガーします。そう：

// 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.

これで、人差し指を追跡する方法のアイデアが得られたと思います。問題は次のようなものです: 2 本の指が動いているとき、どの指がどちらであるかをどのように見分けることtouchmoveができますか? 答えは、オブジェクト (および の取得に使用するオブジェクト) の下のidentifierプロパティです。TouchpageXpageY

したがって、最初の指が下にあるときは、それを記録しidentifierます。今後のタッチイベントについては、 を繰り返しtargetTouches(または単に) 、同じ を持つオブジェクトをchangeTouches見つけます。そのようなオブジェクトが に存在しない場合、何もしません。他のオブジェクトは気にしません。TouchidentifierTouchchangeTouchesTouch

最後に、人差し指をどのように処理したいかを考える必要があります。画面上に他の指があるときに最初の指を離すと、2 番目の指が最初の指のスクロール力を引き継ぎますか? 最初の指の力をリセットするには、すべての指を画面から離す必要がありますか? それはあなた次第です。

于 2014-07-06T00:53:59.340 に答える