Jquery mouseenter () ve fareyle üzerine gelme ()

Yani son zamanlarda cevaplanan bir soru okuduktan sonra gerçekten mouseenter()ve arasındaki farkı anlamak eğer belirsiz değilim mouseover(). Posta devletleri

MouseOver ():

Bir öğeye girdikten sonra ve öğenin içinde herhangi bir fare hareketi olduğunda ateşlenir.

MouseEnter ():

Bir eleman girdikten sonra ateşlenir.

Her ikisini de kullanan bir keman buldum ve oldukça benzer görünüyorlar. Birisi bana ikisi arasındaki farkı açıklayabilir mi?

Ayrıca JQuery tanımlarını okumaya çalıştım, her ikisi de aynı şeyi söylüyor.

Fare işaretçisi öğeye girdiğinde fareyle üzerine gelme olayı bir öğeye gönderilir

Fare işaretçisi öğeye girdiğinde mouseenter olayı bir öğeye gönderilir.

Birisi lütfen bir örnekle açıklığa kavuşturabilir mi?

Hedef öğeniz alt öğeler içerdiğinde davranışı görürsünüz:

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

Fareniz her alt öğeye girdiğinde veya ayrıldığında mouseovertetiklenir ancak tetiklenmez 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>

Bu bulduğum en iyi örneklerden biri:

• MouseEnter
• mouseover
• mouseout
• mouseLeave

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

Ancak aynı şekilde çalışmasına rağmen, mouseenterolay yalnızca fare işaretçisi seçilen öğeye girdiğinde tetiklenir . mouseoverOlay tetiklenir bir fare işaretçisi de herhangi bir çocuk elemanlarını girerse .

Jquery dokümantasyon sayfasının altındaki örnek kod ve demoya bakın:

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

fare imleci yalnızca imleç ilişkili öğeye hareket ettiğinde tetiklenir.

MouseEnter olay farklıdır gelen Mouseover o değerlendirme şeklinde olay baloncuklanmasını . MouseEnter olay, sadece tetikler zaman onun işleyicisi fare elemanı girer o bağlandığı değil soyundan . Bakınız: https://api.jquery.com/mouseenter/

MouseLeave olay farklıdır gelen Fare terk işlediği şekilde olay baloncuklanmasını . MouseLeave olay, sadece tetikler zaman onun işleyicisi fare elemanı bırakır o bağlandığı değil soyundan . Bakınız: https://api.jquery.com/mouseleave/

Bu örnek arasındaki farkı gösterir mousemove , MouseEnter ve mouseover olayları:

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 : fare işaretçisi div öğesinin her üzerine getirildiğinde oluşur.
• onmouseenter : yalnızca fare işaretçisi div öğesine girdiğinde oluşur.
• onmouseover : fare işaretçisi div öğesine ve alt öğelerine (p ve span) girdiğinde oluşur.

Eski bir soru, ancak içgörü imo ile hala güncel bir cevap yok.

Bu gün, tüm tarayıcılar mouseover/mouseoutve destekler mouseenter/mouseleave. Bununla birlikte, jQuery işleyicinizi kaydettirmez mouseenter/mouseleave, ancak mouseover/mouseoutaşağıdaki kodun gösterdiği gibi sessizce bir sarmalayıcıya koyar vemouseenter/mouseleave .

Olayların kesin davranışı özellikle “delege işleyicileri” ile ilgilidir. Ne yazık ki, jQuery, delege işleyicilerinin ne olduğu ve etkinlikler için ne almaları gerektiğine dair kendi farklı yorumlarına sahiptir. Bu gerçek başka bir cevapta gösteriliyor daha basit tıklama etkinliği için .

Peki, olaylar ve işleyiciler için Javascript ifadesini kullanan, ancak her ikisini de farklı kılan ve belgelerinde bile bahsetmeyen jQuery ile ilgili bir soruyu düzgün bir şekilde nasıl cevaplayabilirim?

İlk olarak “gerçek” Javascript'teki farklılıklar:

• her ikisi de
  • tarayıcı konumunu örneklediğinden daha hızlı hareket ettirildiğinde fare dış / dış elemanlardan iç / en içteki elemanlara “atlayabilir”
  • herhangi biri enter/overbuna karşılık gelir leave/out(muhtemelen geç / gergin)
  • olaylar işaretçinin altındaki görünür öğeye gider (görünmez → hedef olamaz)
• mouseenter/mouseleave
  • kayıtlı olduğu öğeye teslim edilir (hedef)
  • eleman veya herhangi bir torun (örn. atlayarak) her girildiğinde / solda
  • kabarcık yapamaz, çünkü kavramsal olarak torunlar söz konusu öğenin bir parçası olarak kabul edilir, yani başka bir olayın gelebileceği hiçbir çocuk yoktur (ebeveyne “girilen / sola” anlamı ile ?!)
  • çocuklar da doğru girilen / ayrılan, ancak ebeveyn girme / bırakma döngüsüyle ilgisi olmayan benzer işleyicilere sahip olabilirler
• mouseover/mouseout
  • hedef, işaretçinin altındaki gerçek öğedir
    • bir hedef iki şey olamaz: yani ebeveyn ve çocuk aynı anda değil
  • etkinlik "yuvalayamaz"
    • bir çocuğun “aşılabilmesi” için ebeveynin “dışarı çıkması” gerekir
  • target / relatedTarget etkinliğin nerede gerçekleştiğini gösterdiğinden, balon patlayabilir

Bazı testlerden sonra, jQuery “seçici kayıtlı delege işleyicileri” kullanmadığınız sürece, öykünmenin gereksiz ancak makul olduğunu gösterir: Alamayacak mouseover/mouseoutolayları filtreler mouseenter/mouseleave. Yine de hedef dağınık. Gerçek mouseenter/mouseleave, işleyici öğeyi hedef olarak verir, öykünme o öğenin çocuklarını, yani mouseover/mouseouttaşınan her şeyi gösterebilir .

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>