JQuery-Ereignisse für das Verhalten von Mauszeigern im 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>

wenn die Maus in das div in Firefox, Chrome mouseenter Ereignis wird immer zuerst als Maus bewegen im Falle von IE mousemove Ereignis immer zuerst als mouseenter abgefeuert. Ist dies wissen Bug? oder gibt es eine andere Möglichkeit, so dass alle Browser auf die gleiche Weise verhalten können

Answer 1

[Aktualisierte Antwort]

Es gibt zwei Möglichkeiten, dies zu umgehen.

1) Binden Sie nur Ihre mousemove Ereignis auf der mousenter Ereignis, damit alle nachfolgenden Ereignisse in der gleichen Reihenfolge ausgelöst werden. Dies beinhaltet eine Menge von Bindungen und Entbindungen.

$(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) Speichern Sie eine Variable, und führen Sie nur Mausbewegungsereignisse aus, wenn die Bedingungen übereinstimmen. Viel weniger Bindung/unbinding auf diese Weise (Dies ist, wie ich es tun würde, wenn es mein Projekt war):

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

[Originalantwort]

mouseenter ist ein spezielles Ereignis, das von jQuery erzeugt wird, weshalb es nach mousemove . Was Sie wahrscheinlich wollen, ist mouseover :

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

Um zu verhindern, dass Sie mehrere Mouseover-Ereignisse von untergeordneten Elementen erhalten, können Sie zusätzlich testen, ob Sie nur auf Ereignisse reagieren, die von Ihrem Objekt erzeugt werden:

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

Schließlich habe ich in meiner Antwort die Verkettung (d.h. 'mouseover().mousemove()') verwendet, anstatt den Selektor aufzurufen $("#outer") zweimal. Das macht Ihre Seite nur ein wenig schneller :)