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);
});`

Hover工作正常，但现在我需要在悬停的img上捕获click事件。为此，我有以下代码

$('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();
});

然后点击事件不会传播到另一个节点。

如何在jquery中处于悬停状态时捕获click事件？

3 个答案: