Hover agissant bizarre dans IE

Question

Jetez un oeil à ce code HTML:

<div class="overlay"> 
    <a href="#">1</a> 
    <a href="#">1</a> 
    <a href="#">1</a> 
    <a href="#">1</a> 
    <a href="#">1</a> 
</div> 

et ce code jQuery:

$('div.overlay').mouseenter(function() { clearTimeout(thumbsAway); }); 
$('div.overlay').mouseleave(function() { clearTimeout(thumbsAway); $('ul.thumbs').animate({top: '520px'}, 750); }); 

Le problème est que dans IE, planant sur tout élément enfant sera également de déclenchement mouseenter/mouseleave. Comment puis-je empêcher cela?

Answer 1

Vous pouvez utiliser event.stopPropagation()

$('div.overlay').hover(function(event){ 
    event.stopPropagation(); 
    clearTimeout(thumbsAway); 
    }, 
    function(event){ 
    event.stopPropagation(); 
    clearTimeout(thumbsAway); 
    } 
); 

Ou vérifiez la cible de l'événement.

$('div.overlay').hover(function(event){ 
    if (this == event.target){clearTimeout(thumbsAway);} 
    }, 
    function(event){ 
    if (this == event.target){clearTimeout(thumbsAway);} 
    } 
); 

Answer 2

Essayez d'arrêter la propagation de l'événement avec stopPropogation():

$('div.overlay').mouseenter(function(e) { 
    e.stopPropogation(); 
    clearTimeout(thumbsAway); 
}); 

---

Description: Evite l'événement de bouillonne l'arbre DOM, ce qui empêche tous les gestionnaires de parents d'être informé de l'événement.