10

私はhammer.jsを使用していますがevent.stopPropagation()、tapイベントを使用していないようです。

子をクリックすると、関連するイベントがトリガーされますが、親のイベントもトリガーされるので、それは望ましくありません。

$('#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も試してみましたが、問題は同じようです。これらのライブラリの1つでこの結果を達成するにはどうすればよいですか？（または必要に応じて別のもの）

4

5 に答える 5

8

別のコメントで述べたように、あなたがしたevent.stopPropagation()ように、イベントが親にバブリングするのを止めるために必要なのは呼び出しだけであると予想されます。

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

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

于 2012-08-03T16:41:51.500 に答える
3

タッチイベントでも同様の問題がありました。

を使って解決しました

return false;

これは、e.preventDefault(); を呼び出すのと同じです。e.stopPropagation();

于 2014-08-01T16:12:20.560 に答える
3

この作業を行うことができなかったので、子イベントが既にトリガーされているかどうかを知るために変数を使用しました。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');
});

</p>

于 2012-06-14T11:32:06.110 に答える
0

これを機能させることができない場合..必要なものを確認した後、タップで別のメソッドを呼び出すだけです (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
});
于 2012-06-13T17:09:37.550 に答える
0

どの要素がタップされたかを確認するために、親ハンドラーの内部をチェックしてみてくださいe.currentTarget(またはそうですか?)。e.target子要素の場合はすぐに戻り、そうでない場合は関数を続行します。

于 2012-06-13T17:36:20.313 に答える