5

基本的に一連のスライドである iPad アプリケーションを構築しています。

スライドを読み終えたら、次のスライドにスワイプすることができます *(Zepto のスワイプを使用)。これにより、window.location が次のスライドに変更されます。(スワイプ イベントは、ページ全体で動作する必要があるため、window.body にバインドされます)...

ここに問題があります。一部のスライドには、ボタンやドラッグ可能なアイテムなどのインタラクティブな要素があります。問題は、これらのインタラクティブな要素の一部を使用すると、スワイプ イベントがトリガーされることです。

これらのインスタンスでスワイプがトリガーされないようにする方法を知っている人はいますか? おそらく感度などを設定しますか？

私は困惑しています...

ご多幸をお祈り申し上げます。

4

2 に答える 2

3

Zepto がタッチ イベントを管理する方法は、リスナーを 、touchstart、touchendおよびのtouchmoveイベントにバインドすることdocument.bodyです。次に、送信するイベントの計算を実行し、イベントを受信した要素でイベントをトリガーしますtouchstart。このイベントは、各要素のリスナーを呼び出す DOM ツリーをバブルアップします。

これにより、スワイプ イベントを防止する 2 つの方法が得られます。

まず、次のようなことができます。

$('#my-child-element').bind('touchstart touchend touchup', function(event) {
    event.stopPropagation();
});

子要素が 1 つのタッチ イベントを受け取ると、それが親要素、特に body タグに伝播するのを防ぎます。これにより、Zepto タッチ プロセッサが何も実行できなくなり、その要素での操作中にスワイプ、タップ、singleTap、longTap、および doubleTap イベントが発生するのをブロックします。

スワイプ イベントもバブリングするため、これらの特定のイベントがページ変更のスワイプをリッスンする要素にバブリングするのを防ぐこともできます。

$('#my-child-element').bind('swipeLeft swipeRight', function(event) {
    event.stopPropagation();
});

これにより、Zepto によって生成されたイベントを子要素内で受信できますが、外部では受信できません。Zepto のタップ イベントも、子内のすべての要素に対して機能します。

ここでフィドル: http://jsfiddle.net/bnickel/dUuUd/

于 2013-02-25T15:46:49.570 に答える