События JQuery mouseenter MouseMove Поведение в 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>

при вводе мыши в div В Firefox событие Chrome mouseenter запускается раньше, чем движение мыши, в случае, если событие IE mousemove запускается раньше, чем mouseenter. Это известная ошибка? или есть ли другой способ, чтобы все браузеры могли вести себя одинаково

Answer 1

[Обновленный ответ]

Есть два способа обойти это.

1) привязывает только ваше событие mousemove к событию mousenter, поэтому все последующие события будут правильно запускаться в том же порядке. Это включает в себя много привязок и откреплений.

$(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) Сохраняйте переменную и выполняйте события mousemove только тогда, когда условия совпадают.Гораздо меньше привязки / снятия привязки таким образом (вот как бы я это сделал, если бы это был мой проект):

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

[Оригинальный ответ]

mouseenterэто специальное событие, созданное jQuery, поэтому оно может запускаться после mousemove.Что вам, вероятно, нужно: mouseover:

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

Кроме того, чтобы избежать получения нескольких событий наведения мыши от дочерних элементов, вы можете проверить, что вы действуете только для событий, сгенерированных вашим объектом:

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

Наконец, в своем ответе я использовал цепочку (то есть 'mouseover (). Mousemove ()') вместо того, чтобы дважды вызывать селектор $("#outer").Это просто делает вашу страницу немного быстрее:)