JQuery mouseenter () a mouseover ()

Po przeczytaniu niedawno udzielonego pytania nie jestem pewien, czy naprawdę rozumiem różnicę między mouseenter()i mouseover(). Stan wiadomości

MouseOver ():

Będzie uruchamiany po wejściu do elementu i za każdym razem, gdy w elemencie wystąpią jakiekolwiek ruchy myszy.

MouseEnter ():

Zapali się po wejściu do elementu.

Wymyśliłem skrzypce, które używają obu i wydają się być dość podobne. Czy ktoś może mi wyjaśnić różnicę między tymi dwoma?

Próbowałem też przeczytać definicje JQuery, obie mówią to samo.

Zdarzenie mouseover jest wysyłane do elementu, gdy wskaźnik myszy wchodzi do elementu

Zdarzenie mouseenter jest wysyłane do elementu, gdy wskaźnik myszy wchodzi do elementu.

Czy ktoś mógłby wyjaśnić na przykładzie?

Widzisz zachowanie, gdy element docelowy zawiera elementy potomne:

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

Za każdym razem, gdy mysz wchodzi lub opuszcza element podrzędny, mouseoverjest wyzwalana, ale nie 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>

To jeden z najlepszych przykładów, jakie znalazłem:

• mouseenter
• najechanie myszą
• wycięcie myszy
• mouseleave

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

Choć działają w ten sam sposób, mouseenterzdarzenie jest wyzwalane tylko wtedy, gdy wskaźnik myszy znajdzie się w wybranym elemencie . mouseoverZdarzenie jest wywoływane , gdy wskaźnik myszy wejdzie żadnych elementów potomnych, jak również .

Zobacz przykładowy kod i demo na dole strony dokumentacji jquery:

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

... mouseover - uruchamia się, gdy wskaźnik przesuwa się do elementu podrzędnego, natomiast mouseenter - uruchamia się tylko wtedy, gdy wskaźnik przesuwa się do elementu związanego.

W mouseenter zdarzeń różni się od najechaniu myszą w sposób obsługuje pęcherzyków zdarzeń . Mouseenter wydarzenie, tylko wyzwala jego obsługi, gdy mysz wchodzi element jest związany, nie potomka . Zobacz: https://api.jquery.com/mouseenter/

W mouseLeave zdarzeń różni się od odsunięciu myszy w sposób obsługuje pęcherzyków zdarzeń . MouseLeave wydarzenie, tylko wyzwala jego obsługi, gdy opuszcza mysz element jest związany, nie potomka . Zobacz: https://api.jquery.com/mouseleave/

Ten przykład demonstruje różnicę między zdarzeniami mousemove , mouseenter i 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 : występuje za każdym razem, gdy wskaźnik myszy zostanie przesunięty nad element div.
• onmouseenter : występuje tylko wtedy, gdy wskaźnik myszy znajdzie się w elemencie div.
• onmouseover : występuje, gdy wskaźnik myszy wchodzi do elementu div i jego elementów potomnych (p i span).

Stare pytanie, ale nadal nie ma dobrej, aktualnej odpowiedzi z wglądem imo.

Obecnie wszystkie przeglądarki obsługują mouseover/mouseouti mouseenter/mouseleave. Niemniej jednak jQuery nie rejestruje programu obsługi mouseenter/mouseleave, ale po cichu umieszcza je w opakowaniach, mouseover/mouseoutjak pokazuje poniższy kod, i tworzy własną, nieco inną interpretację mouseenter/mouseleave.

Dokładne zachowanie zdarzeń jest szczególnie istotne w przypadku „obsługi delegatów”. Niestety, jQuery ma również inną interpretację tego, czym są programy obsługi delegatów i co powinny otrzymywać dla zdarzeń. Fakt ten pokazuje inna odpowiedź dotycząca prostszego zdarzenia kliknięcia.

Jak więc właściwie odpowiedzieć na pytanie o jQuery, które używa sformułowań Javascript dla zdarzeń i handlerów, ale różni je i nawet nie wspomina o tym w swojej dokumentacji?

Najpierw różnice w „prawdziwym” JavaScript:

• obie
  • mysz może „przeskakiwać” z elementów zewnętrznych / zewnętrznych do elementów wewnętrznych / najbardziej wewnętrznych, gdy jest poruszana szybciej niż przeglądarka sprawdza jej położenie
  • każdy enter/overdostaje odpowiedni leave/out(prawdopodobnie późny / niespokojny)
  • zdarzenia przechodzą do widocznego elementu poniżej wskaźnika (niewidoczne → nie mogą być celem)
• mouseenter/mouseleave
  • jest dostarczany do elementu, w którym został zarejestrowany (docelowy)
  • ilekroć element lub dowolny element podrzędny (np. przeskakując) jest wprowadzany / opuszczany
  • nie może bąbelkować, ponieważ koncepcyjnie potomkowie są uważani za część rozpatrywanego elementu, tj. nie ma dzieci, z których mogłoby pochodzić inne zdarzenie (w znaczeniu „wszedł / opuścił” rodzica ?!)
  • dzieci mogą również mieć zarejestrowanych podobnych opiekunów, którzy wchodzą / wychodzą poprawnie, ale nie są związani z cyklem wejścia / wyjścia rodziców
• mouseover/mouseout
  • celem jest rzeczywisty element poniżej wskaźnika
    • celem nie mogą być dwie rzeczy: tj. nie rodzic i dziecko w tym samym czasie
  • wydarzenie nie może „zagnieździć”
    • zanim dziecko będzie mogło się „ogarnąć”, rodzic musi „wyjść”
  • can bubble, ponieważ target / relatedTarget wskazują, gdzie wystąpiło zdarzenie

Po kilku testach okazuje się, że dopóki nie używasz „obsługi delegatów z rejestracją selektora” jQuery, emulacja jest niepotrzebna, ale rozsądna: odfiltrowuje mouseover/mouseoutzdarzenia, mouseenter/mouseleavektórych nie uzyska. Jednak cel jest pomieszany. Rzeczywiste mouseenter/mouseleavewskazywałyby element obsługujący jako cel, emulacja mogłaby wskazywać dzieci tego elementu, tj. Cokolwiek jest mouseover/mouseoutprzenoszone.

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>