eventos JQuery MouseEnter comportamiento mousemove en 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> 

cuando el ratón entró en el div en Firefox, Chrome MouseEnter evento está consiguiendo dispararon primero que mover el ratón en caso de evento MouseMove IE ser despedido primero que MouseEnter. ¿Este es un error? o hay alguna otra manera para que todos los navegadores pueden comportarse de la misma manera

Answer 1

[Respuesta Actualizado]

Hay dos maneras de conseguir alrededor de esto.

1) solo enlaza el evento mousemove en el evento mousenter para que todos los eventos siguientes se activen correctamente en el mismo orden. Esto implica una gran cantidad de enlace y desvinculación.

$(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) Guarde una variable, y sólo ejecutar eventos mousemove cuando la condiciones del partido. Mucho menos unión/desunión de esta manera (Así es como lo haría si se tratara de mi proyecto):

$(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'); 
     } 
    }); 
}); 

[Respuesta Original]

mouseenter es un evento especial creado por jQuery que es la razón podría disparar después de mousemove. Lo que probablemente quiere es mouseover:

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

Además, para no recibir múltiples eventos mouseover de elementos secundarios, que podría poner a prueba para asegurarse de que sólo se está actuando en eventos generados por el objeto:

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

Finalmente, en mi respuesta utilicé el encadenamiento (es decir, 'mouseover(). Mousemove()') en lugar de llamar al selector $("#outer") dos veces. Esto solo hace que su página sea un poco más rápida :)