événements JQuery mouseenter comportement mousemove dans IE

Question

$(document).ready(function(){ 
    $('#outer').mouseenter(function(){ 
    console.log("mouse enter"); 
    }); 
    $('#outer').mousemove(function(){ 
    console.log("mouse move"); 
    }); 
}); 

<div style='width:800px;border:1px solid red' id="outer"> 
this is test 
</div> 

lorsque la souris est entrée div dans FireFox, événement mouseenter chrome est d'obtenir tiré d'abord que déplacer la souris en cas d'événement IE mousemove se faisant virer d'abord que mouseenter. Est-ce que c'est un bug? ou est-il une autre façon à ce que tous les navigateurs peuvent se comporter de la même façon

Answer 1

[Mise à jour réponse]

Il y a deux façons de contourner ce problème. 1) ne lier que votre événement mousemove sur l'événement mousenter afin que tous les événements suivants se déclenchent correctement dans le même ordre. Cela implique beaucoup de liaison et de désolidarisation.

$(document).ready(function(){ 
    var outer_mousemove = function(){ console.log('mousemove') }; 

    $("#outer").hover(function(){ 
     console.log('mouseenter'); 
     // Attach the event listener only after 
     // Mouse enter has fired 
     $(this).mousemove(outer_mousemove); 
    }, function(){ 
     $(this).unbind('mousemove', outer_mousemove); 
    }); 
}); 

2) stocker une valeur et que l'exécution des événements mousemove lorsque le match conditions. cette façon beaucoup moins contraignante/déliaison (Voilà comment je le ferais si elle était mon projet):

$(document).ready(function(){ 
    var outer_mousemove = false; 

    $("#outer").hover(function(){ 
     console.log('mouseenter'); 
     outer_mousemove = true; 
    }, function(){ 
     console.log('mouseleave'); 
     outer_mousemove = false; 
    }).mousemove(function(){ 
     if(outer_mousemove){ 
     console.log('mousemove'); 
     } 
    }); 
}); 

[Réponse originale]

mouseenter est un événement spécial créé par jQuery qui est pourquoi il pourrait tirer après mousemove. Ce que vous voulez sans doute est mouseover:

$(document).ready(function(){ 
    $('#outer').mouseover(function(){ 
    console.log("mouse over"); 
    }).mousemove(function(){ 
    console.log("mouse move"); 
    }); 
}); 

De plus, pour ne pas recevoir de multiples événements mouseover à partir d'éléments de l'enfant, vous pouvez tester pour vous assurer que vous n'agit sur les événements générés par votre objet:

$(document).ready(function(){ 
    $('#outer').mouseover(function(e){ 
    if(e.target == this){ 
     console.log("mouse over"); 
    } 
    }).mousemove(function(){ 
    console.log("mouse move"); 
    }); 
}); 

Enfin, dans ma réponse, j'ai utilisé le chaînage (ie 'mouseover() .moussemove()') au lieu d'appeler deux fois le sélecteur $("#outer"). Cela rend votre page un peu plus rapide :)