jquery冒泡问题

我在做幻灯片放映。幻灯片包含一张图片。当用户在图像上时，应显示范围（包含链接）。以及如果用户从图像中移出，跨度需要隐藏。jquery冒泡问题

这工作正常。问题是，当鼠标输入跨度显示时。但我需要点击跨度内的链接。当我移动到那个链接，我得到问题，链接得到震动。我相信这是因为入侵事件。任何人都可以告诉我如何避免这个问题？

我用了preventDefatul甚至stop stopPropagation，但是没有用。

这是我的jQuery代码：

$(document).ready(function(){ 

$('span', '.case-study-slider').hide(); 

$('.case-study-slider img').bind('mouseenter', function(e){ 
    $(e.target).siblings('span').show(); 
    e.stopPropagation(); 
}) 
$('.case-study-slider img').bind('mouseleave', function(e){ 
    $(e.target).siblings('span').hide(); 
    e.stopPropagation(); 
})

}）;

这是我的HTML代码：

<div class="case-study-slider"> 
    <span class="slider-player"> 
     <a href="case-study-page-a.html"></a> 
    </span> 
    <img height="270" width="702" alt="slider" src="images/slide-space-holder-type2.jpg" /></div>

跨度滑块玩家绝对定位在图像上。

我需要的是：当用户进入图像，我的跨度需要显示，他们可以点击链接移动我的幻灯片没有任何摇晃链接。

任何人都可以帮助我吗？

来源

2011-05-18 3gwebtrain

麻烦的是在容器上，你必须把你的形象和span.slider玩家在同一div（因为它），但该事件绑定到容器..所以

$(document).ready(function(){ 
    $('span', '.case-study-slider').hide(); 
    $('.case-study-slider').bind('mouseenter', function(e){ 
     //$(e.target).siblings('span').show(); 
     $(this).children('span').show(); 
     e.stopPropagation(); 
    }); 
    $('.case-study-slider').bind('mouseleave', function(e){ 
     //$(e.target).siblings('span').hide(); 
     $(this).children('span').hide(); 
     e.stopPropagation(); 
    }) 
});

但我喜欢这种方法：P

$(document).ready(function(){ 
    $('span', '.case-study-slider').hide(); 
    $('.case-study-slider').hover({ 
     function() { 
     $(this).children('.slider-player').show(); 
     }, 
     function() { 
     $(this).children('.slider-player').hide(); 
     } 
    }); 
});

这种方法，你需要don0t stopPropagation

我因子评分有助于

@modify：我忘了更改事件内的选择器，并添加了我的首选解决方案:)

来源

2011-05-18 09:42:12

jquery冒泡问题

回答

相关问题