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冒泡問題

回答

相關問題