1

私は自分のサイトをタッチ フレンドリーにし、うまく機能するシンプルなカルーセル スタイルのプラグインを作成しましたが、touchend イベントが発生し、元のターゲットが画像だった場合 (ユーザーが画像にタッチしてからスワイプ/左に移動してナビゲートした場合)、まだ開いています。画像に関連付けられたリンク。

event.stopPropagation() と event.preventDefault() を入れましたが、効果はありません。

これを防ぐ方法について誰か考えがありますか？

編集：

私は以下を使用してタッチイベントをバインドしています:

obj.parent().bind('touchstart', onTouchStart);
obj.parent().bind('touchend', onTouchEnd);

タッチエンド機能はこちら

function onTouchEnd(event) {
    if(!cdata.in_touch) return;
    cdata.in_touch = false;

    var pos = getPointerPosition(event);
    var final_distance = Math.sqrt(pos.x - cdata.touch_start);
    cdata.timer_end = new Date();
    cdata.timer_length = cdata.timer_end - cdata.timer_start;

    if(cdata.timer_length > 100) {
        if (final_distance > 100) {
            event.stopPropagation();
            event.preventDefault();
            // no effect, link associated with image still fires
            return;
        }
    }
}
4

1 に答える 1

3

この問題を解決するための一般的な手法は、 を聞くことtouchstartです。が起動したらtouchstart、タッチ XY 座標を保存し、 と のリスナーをアタッチtouchendしtouchmoveます。リスナーは、touchend呼び出したい指定されたコールバックを呼び出す必要があります (つまり、タップされた画像をフルスクリーンで表示します)。はtouchmove、元のタップの XY 座標から移動した距離を監視する必要があり、それが特定のしきい値を超えた場合はtouchend(および冗長なtouchmoveイベントも) キャンセルします。

Google https://developers.google.com/mobile/articles/fast_buttonsによるこれを行う参照コードを含む優れた記事があり ます

また、FastClick と呼ばれる FTlabs による新しい Github プロジェクトはさらに包括的です。 https://github.com/ftlabs/fastclick

于 2013-02-04T12:15:12.730 に答える