1

モバイル ブラウザー用のスワイプ ナビゲーションを追加した小さな Web ギャラリーがあります。私は非常に単純な touchstart/touchmove/touchend イベント追跡でそれを行いました。

問題は、ブラウザー ウィンドウでズームをピンチしようとすると、タッチ イベント ハンドラーを追加した要素で指が始まると失敗することです。preventDefault の呼び出しから推測しています。

ブラウザのズームインおよびズームアウト機能をブロックせずに、画像をナビゲートするためのタッチイベントを追跡する方法はありますか? 要素の上にある場合は、1 本の指のスクロールをブロックしてもかまいませんが、ピンチ ズームを許可したいと考えています。

コードは次のとおりです。

  function addDragHandlers(eventDivId) {
    var startX, endX;
    var slides = $('#'+eventDivId);

    slides.bind('touchstart', function(e) {
        e.preventDefault();
        startX = e.pageX;
        endX = startX;
    });

    slides.bind('touchmove', function(e) {
        e.preventDefault();
        endX = e.pageX;
    });

    slides.bind('touchend', function(e) {
            e.preventDefault();
            if ( endX - startX < 0) {
                // go to next image
            } else if ( endX - startX > 0) {
                // go to previous image
            } else {
                // do click action
            }
        }
    });
 }
4

2 に答える 2

0

私はこれを Android で動作させたかったので、私が読んだジェスチャ イベントは iOS でのみ使用したくありませんでしたが、その主張をテストするための Android はありません。

次に、ジェスチャのサポートを簡単にしようとする JavaScript ジェスチャ ライブラリの束を調べました。残念ながら、どれも私の目的には十分に機能しませんでした。

そのため、ボディのタッチ ハンドラーを使用してページ上のすべてのタッチを追跡し、カスタム ヒューリスティックを使用してギャラリーを移動するか、それを使用してページをスクロール/ピンチするかを決定しました。

まだ完璧ではありません。私のギャラリー要素に触れてから、その外側に触れると、ピンチが機能しません。

余談ですが、「TouchSwipe」jquery ライブラリには非常によく設計された柔軟な API があります。週間。この種の課題を検討していて、今から数か月後であれば、そのプラグインの更新を確認することをお勧めします.

于 2013-06-03T14:52:48.267 に答える
0

あなたが望むのは、 ongesturestart 、 ongesturestart move 、および end が、タッチ時と同じですが、複数の指に対して機能することです。それらから、次のリスナーを追加できます。

event.stopPropagation();

「preventDefault()」が伝播するのを防ぎます。

于 2013-05-17T20:38:24.240 に答える