2016-09-30 6 views
-3

コールバック関数でいくつかのタッチコントロールを有効にしようとしていますが、コールバック関数で$(this)と同様にイベントにアクセスできません。次のように今のコードでは、なります

$('.img-responsive').each(touchControls); 

function touchControls(event) { 
    event.preventDefault(); 
    var mc = new Hammer(this); 
    mc.on("doubletap", function() { 
     console.log($(this)); 
    }); 
} 

はどこ.imgの応答は私のページ上の画像のクラスです。

event.preventDefaultを呼び出そうとすると、event.preventDefaultが関数ではないというエラーが発生します。イベントが自動的に変数に渡されたと思いますか? .onで名前付きコールバック関数を実行したとき、event.preventDefault()が正常に機能したことがわかりました。私がそれをするときにそれが異なっていると思います。どのように正しくアクセスするのですか?

ここで、event.preventDefault()行を削除すると、$(this)を記録すると関数が取得されます。私は個々の要素を得ることを期待していたので、私はそれらのタッチコントロールを設定することができましたが、それは明らかに機能しませんでした。私は「この」でバインドしようとした:

$('.img-responsive').each(touchControls).bind(this); 

しかし、私は$(this)をログに記録するとき、それはまだ機能していない、私は期待していた要素でした。

私は基本的には、$(this)と定義されたコールバック関数内のイベントにアクセスする方法について混乱しています。

答えて

1

.each

$('.img-responsive').each(touchControls); 
 

 
function touchControls(eachIndex) { 
 
    var mc = new Hammer(this); 
 
    mc.on("doubletap", function(event) { 
 
    // move preventDefault here and pass the event 
 
    event.preventDefault(); 
 
    console.log($(this)); 
 
    }); 
 
} 
 

 
function Hammer(el){ 
 
    return $(el) 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="img-responsive">img</div> 
 
<div class="img-responsive">img</div>

は、イベントハンドラではありません。

.each(関数)

機能
種類:機能(整数インデックス、エレメント素子)
実行する機能eachコールバック関数のメソッドのシグネチャは次のようになり一致した要素ごとに

eventオブジェクトを参照する必要はありませんが、より重要なことに、防止するためのデフォルトのイベント動作はありません。

逆に、実際にはonはイベントハンドラをセットアップします。そのコールバック関数は、そのパラメータとしてイベントを受け取ります。 .onのコールバック関数内で、イベントハンドラコード内でイベント管理を処理できます。

thisは、反復処理中に現在の要素を参照します。しかし、内部のコールバック関数の中には、別のコンテキスト(別のthis)があります。

function touchControls() { 
    var $this = $(this); 
    var mc = new Hammer(this); 
    mc.on("doubletap", function(e) { 
     e.preventDefault(); 
     console.log($this); 
    }); 
} 
+0

この場合、ダブルタップイベントのデフォルトの振る舞いがズームインされないようにするにはどうすればよいですか?私がここでそれを防ぐべきでないならば、それを防ぐためにどこにアクセスすればいいですか? –

+0

@MichaelYousef管理しているイベントに対処するための私の応答を更新しました。 – nbrooks

+0

私はダブルタップの関数を指すように、Hammerがコンテキストを変更すると思いますか?いずれにせよ、あなたのソリューションはとても感謝してくれました。 –

0

イベントが間違った関数で渡されました。イベントリスナーに渡す必要があります。各ループの最初の引数は、反復の現在のインデックスです。それはeventオブジェクトを受け入れないコールバック関数ですので

関連する問題