jquery - jqueryでホバー状態のときにクリックイベントをキャプチャするにはどうすればよいですか？

Question

以下のような構造の横型カルーセルがあります

ul
  <li>
    <a>
     <img>

  <li>
    <a>
     <img>

  <li>
    <a>
     <img>

ホバーアニメーションのjqueryコードは以下のとおりです

$('ul li a img').hover(function() {
    $(this).stop().animate({ height: '60px', width: '60px'}, 200);
}, function() {
    $(this).stop().animate({ height: '44px', width: '44px'}, 200);
});`

ホバーは正常に機能していますが、ホバーされたimgでクリックイベントをキャプチャする必要があります。このために私は以下のコードを持っています

$('ul li a img').click(function() {
    console.log($(this));
    return true;
});

クリックイベントは、カルーセル内のアイテムの数と同じ数だけトリガーされます。アイテムが20個ある場合、クリックイベントは20回トリガーされますが、ホバーされたアイテムに対しては1回だけトリガーされます。

ありがとう

Answer 1

クリックハンドラーから戻っtrueてきたため、イベントがバブルアップしました（画像が互いに積み重ねられていない限り、理由は完全にはわかりません）。戻るfalseと、最初のクリックが処理された後、イベントの伝播が停止します。

$('ul li a img').click(function() {
    console.log($(this));
    return false;
});

Answer 2

$('ul li a img').on('click',function(e){
 //your code
 e.stopPropagation();
});

Answer 3

Yoはe.stopPropagation()関数を使用することもできます：

$('ul li a img').click(function(e) {
    console.log($(this));
    e.stopPropagation();
});

その後、クリックイベントは別のノードに伝播されません。