2013-02-24 8 views
5

基本的に一連のスライドであるiPadアプリケーションを構築しています。ページ上の要素とやりとりするときのスワイプイベントを防止する

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

ここに問題があります:スライドには、ボタン、ドラッグ可能なアイテムなどのインタラクティブな要素があります。スワイプイベントは、これらの対話型要素のいくつかを使用するときにトリガされます。

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

私は困惑...

ベスト願い、多くの感謝!

+0

私はスワイプイベントがドキュメントレベルのイベントから生成されると信じています。要素レベルtouch *イベントが 'stopPropigation()'を呼び出すと、スワイプイベントが生成されなくなります。 –

+0

こんにちは、ここで厚くて申し訳ありません - あなたは愚か者(私!)のためにそれを説明できますか?私は理解するのに苦労しています... – Chris

答えて

2

方法Zeptoは、それがdocument.bodytouchstarttouchend、およびtouchmoveイベントにリスナーをバインドでタッチイベントを管理します。次に、送信するイベントの計算を実行し、touchstartイベントを受信した要素のイベントをトリガーします。このイベントは、各要素のリスナーを呼び起こすDOMツリーをバブルアップします。これは私たちにスワイプイベントを防止する二つの方法与え

こと:あなたの子要素が1つのタッチイベントを受信すると、それが伝播するからそれを防ぐことができます

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

まず、あなたのような何かを行うことができます親要素、最も重要なのはbodyタグです。これにより、Zeptoタッチプロセッサは何もしないで、その要素で操作中にスワイプ、タップ、singleTap、longTap、doubleTapイベントが発生するのをブロックします。

スワイプイベントもバブルので、あなたはまた、単にページ変更スワイプに耳を傾け、あなたの要素にバブリングからそれらの特定のイベントの発生を防ぐことができます:

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

これは、あなたがまだZeptoを受け取ることができますあなたの内部イベントを生成子要素ではありません。 Zeptoタップイベントは、あなたの子供の中のすべての要素に対しても機能します。ここ

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

0

・ホープ "excludedElements" 方法は以下のように、お手伝いをします。

$(".block").swipe({ 
    swipe: function (event, direction, distance, duration, fingerCount, fingerData) { 

    }, 
    excludedElements: ".link, a", 
    threshold: 0 
}); 
関連する問題