JQUERY - MouseEnter/Focus/Hover/Blur

Question

下面是用於顯示和隱藏頁腳橫幅的代碼。除了MouseOver之外，Everthing工作正常。

MouseOver確實有效（並且在觸發時會顯示該區域的高亮區域），但用戶在該區域中單擊時，高亮區消失，但當用戶退出該區域時，高光會在其再次觸發時閃爍，然後單擊出口。

因此，看起來mouseenter/mouseleave代碼在同一區域點擊後重置。

即使點擊之後，如何防止再次觸發此事件？謝謝。

// Hide the Footer 
$(document).on('click','div#fixedPageFooterShown', function() {hideFooterBanner();}); 


// Highlight Footer MouseOver 
$(document).on('mouseenter','div.fixedPageFooterDisplay', function() { 
     $('img.bannerBottomMouseOver').show(); 
    }).on('mouseleave','div.fixedPageFooterDisplay', function() { 
     $('img.bannerBottomMouseOver').hide(); 
}); 


// Hide Footer Banner Function 
function hideFooterBanner() { 
    $('div#fixedPageFooter').fadeOut('fast', function() { 
     $('div#fixedPageFooterClosed').fadeIn('fast'); 
     $('img.bannerBottomMouseOver').fadeOut('fast'); 
     $('img#footerArrowMin').hide(); 
     $('img#footerArrowMax').show(); 
    }); 
} 


// Show Footer Banner Function 
$(document).on('click','div#fixedPageFooterClosed', function() { 
    $(this).fadeOut('fast', function() { 
     $('div#fixedPageFooter').fadeIn('fast'); 
     $('img.bannerBottomMouseOver').fadeOut('fast'); 
     $('img#footerArrowMax').hide(); 
     $('img#footerArrowMin').show(); 
    }); 
}); 

Answer 1

我不知道不工作與，可以幫助更多的，如果你顯示HTML佈局

我認爲你可以使用event.preventdefault()防止違約事件：

// Hide the Footer 


// Highlight Footer MouseOver 
//i'll change here to be more jquery'ish - not need on() i think as it replacemement for live() 

$('div.fixedPageFooterDisplay').bind('mouseenter', function() { 
    $('img.bannerBottomMouseOver').show(); 
}).bind('mouseleave', function() { 
    $('img.bannerBottomMouseOver').hide(); 
}); 


// Hide Footer Banner Function 
var hideFooterBanner = function(event) { 
    //prevent default event handler 
    if (event !== undefined) { 
     event.preventdefault(); 
    } 

    $('div#fixedPageFooter').fadeOut('fast', function() { 
     $('div#fixedPageFooterClosed').fadeIn('fast'); 
     $('img.bannerBottomMouseOver').fadeOut('fast'); 
     $('img#footerArrowMin').hide(); 
     $('img#footerArrowMax').show(); 
    }); 
}; 

//i'll change here to be more jquery'ish 
$('div#fixedPageFooterShown').click(hideFooterBanner); 


// Show Footer Banner Function 
//i'll change here to be more jquery'ish 
$('div#fixedPageFooterClosed').click(function(event) { 

    //prevent default event handler  
    event.preventdefault(); 

    $(this).fadeOut('fast', function() { 
     $('div#fixedPageFooter').fadeIn('fast'); 
     $('img.bannerBottomMouseOver').fadeOut('fast'); 
     $('img#footerArrowMax').hide(); 
     $('img#footerArrowMin').show(); 
    }); 
});​