0

私のページでは、要素を右にスワイプすると、要素が移動します。これらのスワイプを処理するための次のコードがあります。

window.addEventListener("touchstart", touchStart, false);
window.addEventListener("touchmove", touchMove, false);

問題は、スワイプ可能にしたい要素に影響を与えるだけではないということです。代わりに、ページの任意の場所をスワイプすると、が実行されますtouchMove。これを修正するために、私は試しました：

var content = document.getElementById("content");
content.addEventListener("touchstart", touchStart, false);
content.addEventListener("touchmove", touchMove, false);

この種の機能は機能しましたが、divが（ユーザーの操作を介して）表示された場合#contentでも、イベントは発生します。

#content私が検討した別の解決策は、これらのイベントを、スワイプを有効にする必要がある要素にバインドすることでした。問題は、これらの要素が動的にページに追加されるため、ページの読み込み時に上記の関数が呼び出されたときに、要素が考慮されないことです。次に、次のようにjQueryの.on()メソッドを使用することを検討しました。

$("#content .row").on("touchmove", touchMove, false);

しかし、それはまったく呼びかけていませんtouchMove。

これをすべて行うためのより良い方法はありますか？イベントリスナーがのみに割り当てられている場合のtouchMove子ではない要素で呼び出されることは理にかなっていますか？#content#content

4

2 に答える 2

1

イベントをドキュメントに添付し、必要な要素にフィルターを提供して、この方法を試してください。

$(document).on("touchmove", "#content .row", touchMove);

コメントに従って編集すると、この方法でイベントを取得できます

$(document).on("touchmove", "#content .row", function(event){
       alert(event.target.id);
});
于 2012-10-20T00:34:21.290 に答える
0 
$("#content .row").on("touchmove", touchMove, function(){
   // Your code here
});

false or trueほとんどのイベントはを使用してアタッチされるため、セレクターの後の値はここでは必要ありませんevent bubbling.。この場合は省略してハンドラーを作成できます

于 2012-10-20T00:35:00.560 に答える