のstopPropagation（）をタップイベント

Question

と私はhammer.jsを使用していますし、私がevent.stopPropagation()タップイベントでは動作しないことが表示されます。

私は子供をクリックすると、関連するイベントがトリガされますが、親のイベントもトリガされ、私はそれを望んでいません。ここで

$('#parent').hammer().bind('tap', function(e) { 
    $(this).css('background', 'red'); 
});​​​​​​​​ 

$('#child').hammer().bind('tap', function(e) { 
    e.stopPropagation(); 
    $(this).css('background', 'blue'); 
}); 

は一例です：http://jsfiddle.net/Mt9gV/

私もjGesturesを試み、問題が同じであるように思われます。 これらのライブラリのいずれかでこの結果を得るにはどうすればよいですか？

Answer 1

別のコメントで述べたように、あなたが行ったように、1は、期待されますイベントが親にバブリングするのを止める必要があります。

詳細：ただし、Hammer.js ではこれはそうではありません。ハンマーは、$(el).hammer()と呼ぶ各要素の新しいジェスチャーステートマシンを作成します。したがって、タッチイベントがブラウザによって子に発せられると、それは最初に子のロジックによって処理され、親のロジックによって再び処理されます。 タップイベントを取得してから親を停止するなど、あなたはオリジナルのタッチイベントを得ることから、親のハンマー・ステート・マシンを防ぐ必要があります。一般に、event.stopPropagation()を呼び出すと元のイベントの伝播も停止します。ただし、hammer.jsのtapイベントはtouchendで発生しますが、originalEventはキャッシュされたtouchstartイベントです。したがって、元のイベントでの伝播を停止することは、touchstartイベントがDOMを介して先にバブルアップしてしまったため、何の効果もありません。

解決策？私は、これはハンマーでバグであると信じて - タップイベントでoriginalEventを修正プルリクエストを送信してください。他の人がイベントのターゲットを確認できると示唆しているが、それは常に親要素である - 私の意見では別のバグだ。代わりにevent.originalEvent.targetを確認してください。ここでは実装され、この平凡な解決策とJS fiddleです：http://jsfiddle.net/HHRHR/

Answer 2

これが機能しない場合は、必要なことを確認した後でタップで別のメソッドを呼び出してください（arguments.calleeはこのような場合に開始します）。タップされた要素を見つけるために、親ハンドラ内で、他のユーザーをさせるの追加の利点もボタンをフックが...

function myFn(a) { if(a) $(this).css('background', 'red'); else $(this).css('background', 'blue');}

$('#parent').hammer().bind('tap', function(e) { 
    //Check arguments.callee or other data in event and call myFn 
});​​​​​​​​ 

$('#children').hammer().bind('tap', function(e) { 
    //Same here 
}); 

Answer 3

あなたはe.currentTargetをチェックしてみてください（またはそれがe.targetあります？） ;子要素の場合はただちに戻り、それ以外の場合は関数を続行します。

Answer 4

私はこの仕事を得ることができなかったとして、私は子供のイベントがすでにトリガされたかどうかを知るために変数を使用していました。それはevent.stopPropagation()を呼び出すと、すべてのことになると、されjGesturesと非常によく動作します（私はhammer.jsで試していない）

var childTriggered = false; 

$('#child').bind('tapone', function(e) { 
    $(this).css('background', 'red'); 
    childTriggered = true; 
}); 

$('#parent').bind('tapone', function(e) { 
    if(childTriggered) { 
     childTriggered = false; 
     return;     
    } 
    $(this).css('background', 'blue'); 
}); 

Answer 5

私はタッチイベントと同様の問題を抱えていました。

I）は e.preventDefaultを（呼び出しと同じである

return false; 

を使用して、それを解決しました。 e.stopPropagation（）;