Jquery mouseenter () vs mouseover ()

Nachdem ich eine kürzlich beantwortete Frage gelesen habe, ist mir unklar, ob ich den Unterschied zwischen mouseenter()und wirklich verstehe mouseover(). Die Post sagt

MouseOver ():

Wird beim Betreten eines Elements und immer dann ausgelöst, wenn Mausbewegungen innerhalb des Elements auftreten.

MouseEnter ():

Wird beim Betreten eines Elements ausgelöst.

Ich habe mir eine Geige ausgedacht , die beide verwendet, und sie scheinen ziemlich ähnlich zu sein. Kann mir bitte jemand den Unterschied zwischen den beiden erklären?

Ich habe auch versucht, die JQuery-Definitionen zu lesen, beide sagen dasselbe.

Das Mouseover-Ereignis wird an ein Element gesendet, wenn der Mauszeiger das Element betritt

Das Mouseenter-Ereignis wird an ein Element gesendet, wenn der Mauszeiger das Element betritt.

Kann jemand bitte mit einem Beispiel klären?

Sie sehen das Verhalten, wenn Ihr Zielelement untergeordnete Elemente enthält:

http://jsfiddle.net/ZCWvJ/7/

Jedes Mal, wenn Ihre Maus ein untergeordnetes Element betritt oder verlässt, mouseoverwird dies ausgelöst, jedoch nicht mouseenter.

$('#my_div').bind("mouseover mouseenter", function(e) {
  var el = $("#" + e.type);
  var n = +el.text();
  el.text(++n);
});

#my_div {
  padding: 0 20px 20px 0;
  background-color: #eee;
  margin-bottom: 10px;
  width: 90px;
  overflow: hidden;
}

#my_div>div {
  float: left;
  margin: 20px 0 0 20px;
  height: 25px;
  width: 25px;
  background-color: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>

<div id="my_div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Dies ist eines der besten Beispiele, die ich gefunden habe:

• mouseenter
• Mouseover
• Mouseout
• Mausblatt

http://bl.ocks.org/mbostock/5247027

Obwohl sie auf die gleiche Weise funktionieren, wird das mouseenterEreignis nur ausgelöst, wenn der Mauszeiger in das ausgewählte Element eintritt . Das mouseoverEreignis wird ausgelöst, wenn ein Mauszeiger auch untergeordnete Elemente eingibt .

Siehe den Beispielcode und die Demo am Ende der jquery-Dokumentationsseite:

http://api.jquery.com/mouseenter/

... Mouseover wird ausgelöst, wenn sich der Zeiger ebenfalls in das untergeordnete Element bewegt, während Mouseenter nur ausgelöst wird, wenn sich der Zeiger in das gebundene Element bewegt.

Das Mouseenter- Ereignis unterscheidet sich vom Mouseover in der Art und Weise, wie es mit Ereignisblasen umgeht . Das mouseenter- Ereignis löst seinen Handler nur aus, wenn die Maus das Element betritt, an das sie gebunden ist, und keinen Nachkommen . Siehe: https://api.jquery.com/mouseenter/

Das Mouseleave- Ereignis unterscheidet sich vom Mouseout in der Art und Weise, wie es mit dem Sprudeln von Ereignissen umgeht . Das Mouseleave- Ereignis löst seinen Handler nur aus, wenn die Maus das Element verlässt, an das sie gebunden ist, und keinen Nachkommen . Siehe: https://api.jquery.com/mouseleave/

Dieses Beispiel zeigt den Unterschied zwischen den Ereignissen mousemove , mouseenter und mouseover :

https://jsfiddle.net/z8g613yd/

HTML:

<div onmousemove="myMoveFunction()">
    <p>onmousemove: <br> <span id="demo">Mouse over me!</span></p>
</div>

<div onmouseenter="myEnterFunction()">
    <p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p>
</div>

<div onmouseover="myOverFunction()">
    <p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p>
</div>

CSS:

div {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}

p {
    background-color: white;
    height: 50px;
}

p span {
    background-color: #86fcd4;
    padding: 0 20px;
}

JS:

var x = 0;
var y = 0;
var z = 0;

function myMoveFunction() {
    document.getElementById("demo").innerHTML = z += 1;
}

function myEnterFunction() {
    document.getElementById("demo2").innerHTML = x += 1;
}

function myOverFunction() {
    document.getElementById("demo3").innerHTML = y += 1;
}

• onmousemove : tritt jedes Mal auf, wenn der Mauszeiger über das div-Element bewegt wird.
• onmouseenter : tritt nur auf, wenn der Mauszeiger das div-Element betritt.
• onmouseover : tritt auf, wenn der Mauszeiger in das div-Element und seine untergeordneten Elemente (p und span) eingeht.

Alte Frage, aber immer noch keine gute aktuelle Antwort mit Insight Imo.

Heutzutage unterstützen alle Browser mouseover/mouseoutund mouseenter/mouseleave. Trotzdem registriert jQuery Ihren Handler nicht bei mouseenter/mouseleave, sondern legt ihn stillschweigend auf einen Wrapper, mouseover/mouseoutwie der folgende Code zeigt, und interpretiert ihn leicht anders mouseenter/mouseleave.

Das genaue Verhalten von Ereignissen ist besonders für „Delegate-Handler“ relevant. Leider hat jQuery auch eine andere Interpretation dessen, was Delegiertenhandler sind und was sie für Ereignisse erhalten sollten. Diese Tatsache wird in einer anderen Antwort für das einfachere Klickereignis gezeigt.

Wie kann man also eine Frage zu jQuery richtig beantworten, das Javascript-Formulierungen für Ereignisse und Handler verwendet, aber beide unterscheidet und dies in seiner Dokumentation nicht einmal erwähnt?

Zuerst die Unterschiede in "echtem" Javascript:

• beide
  • Die Maus kann von äußeren / äußeren Elementen zu inneren / innersten Elementen „springen“, wenn sie schneller bewegt wird, als der Browser seine Position abtastet
  • Jeder enter/overbekommt eine entsprechende leave/out(möglicherweise spät / nervös)
  • Ereignisse gehen zum sichtbaren Element unter dem Zeiger (unsichtbar → kann kein Ziel sein)
• mouseenter/mouseleave
  • wird an das Element geliefert, an dem es registriert ist (Ziel)
  • wann immer das Element oder ein Nachkomme (z. B. durch Springen) eingegeben / verlassen wird
  • es kann nicht sprudeln, weil die Nachkommen konzeptionell als Teil des fraglichen Elements betrachtet werden, dh es gibt keine Kinder, von denen ein anderes Ereignis kommen könnte (mit der Bedeutung von "eingegeben / verlassen" der Elternteil?!)
  • Bei Kindern sind möglicherweise auch ähnliche Handler registriert, die korrekt ein- / ausgehen, jedoch nicht mit dem Ein- / Ausstiegszyklus der Eltern zusammenhängen
• mouseover/mouseout
  • Das Ziel ist das eigentliche Element unter dem Zeiger
    • Ein Ziel kann nicht zwei Dinge sein: dh nicht Eltern und Kind gleichzeitig
  • Das Ereignis kann nicht „nisten“.
    • Bevor ein Kind „überfordert“ werden kann, muss der Elternteil „raus“.
  • kann sprudeln, da target / relatedTarget angibt, wo das Ereignis aufgetreten ist

Nach einigen Tests zeigt sich, dass die Emulation unnötig, aber vernünftig ist, solange Sie jQuery nicht verwenden, um Handler mit Selektorregistrierung zu delegieren: Sie filtert mouseover/mouseoutEreignisse heraus, die a mouseenter/mouseleavenicht erhalten würde. Das Ziel ist jedoch durcheinander. Der Real mouseenter/mouseleavewürde das Handler-Element als Ziel angeben, die Emulation könnte Kinder dieses Elements anzeigen, dh was auch immer das mouseover/mouseoutgetragen wird.

const list = document.getElementById('log');
const outer = document.getElementById('outer');
const $outer = $(outer);

function log(tag, event) {
  const li = list.insertBefore(document.createElement('li'), list.firstChild);
  // only jQuery handlers have originalEvent
  const e = event.originalEvent || event;
  li.append(`${tag} got ${e.type} on ${e.target.id}`);
}

outer.addEventListener('mouseenter', log.bind(null, 'JSmouseenter'));
$outer.on('mouseenter', log.bind(null, '$mouseenter'));

div {
  margin: 20px;
  border: solid black 2px;
}

#inner {
  min-height: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id=outer>
    <ul id=log>
    </ul>
  </div>
</body>