0

我有一个水平旋转木马，其结构如下

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 次。

谢谢

4

3 回答 3

0

您正在true从单击处理程序返回，这会导致事件冒泡（不完全确定原因，除非您将图像堆叠在一起）。返回false应该使事件在处理第一次点击后停止传播。

$('ul li a img').click(function() {
    console.log($(this));
    return false;
});
于 2013-03-06T09:19:10.710 回答
0 
$('ul li a img').on('click',function(e){
 //your code
 e.stopPropagation();
});
于 2013-03-06T09:20:48.337 回答
0

哟也可以使用e.stopPropagation()功能：

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

然后点击事件不会传播到其他节点。

于 2013-03-06T09:21:23.390 回答