В чем разница между событиями mouseover и mouseenter?

Я всегда использовалmouseover событие, но во время чтения документации JQuery я нашелmouseenter, Кажется, они функционируют точно так же.

Есть ли разница между ними, и если да, то когда я должен их использовать?
(Также относится кmouseout противmouseleave).

Ответы на вопрос(5)

а ссылку с динамически генерируемым контентом. Однако вы можете сгенерировать контент, когда курсор мыши находится над ссылкой, и поместить его как DATAURI в стандартную статическую ссылку. Это позволяет & quot; Сохранить ссылку как .. & quot; опция в контекстном меню.

function download_content(a, side) 
{
    a.innerHTML = "preparing content..";

    var txt = "call a function to generate content";
    var datauri = "data:plain/text;charset=UTF-8," + encodeURIComponent(txt);
    a.setAttribute('download', "chrome_let_you_suggest_a_name.txt");
    a.setAttribute('href', datauri);

    a.innerHTML = "content ready.";
}
document.getElementById('my_a_link').addEventListener('mouseover', function() { download_content(this); });

<a id="my_a_link" href="#">save document</a>
 01 окт. 2015 г., 11:00

do not реагировать на события, всплывающие при наведении и наведении мышиdo.

Вот этостатья это описывает поведение.

 15 июл. 2015 г., 15:57
Это объясняет это прекрасно:bl.ocks.org/mbostock/5247027 mouseover срабатывает каждый раз, когда запускается из контейнера, из-за пузырей событий.
Решение Вопроса

Документ JQuery стр. Это небольшая интерактивная демонстрация, которая очень наглядна, и вы действительно можете убедиться в этом сами.

var i = 0;
$("div.overout")
  .mouseover(function() {
    i += 1;
    $(this).find("span").text("mouse over x " + i);
  })
  .mouseout(function() {
    $(this).find("span").text("mouse out ");
  });

var n = 0;
$("div.enterleave")
  .mouseenter(function() {
    n += 1;
    $(this).find("span").text("mouse enter x " + n);
  })
  .mouseleave(function() {
    $(this).find("span").text("mouse leave");
  });
div.out {
  width: 40%;
  height: 120px;
  margin: 0 15px;
  background-color: #d6edfc;
  float: left;
}

div.in {
  width: 60%;
  height: 60%;
  background-color: #fc0;
  margin: 10px auto;
}

p {
  line-height: 1em;
  margin: 0;
  padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

<div class="out enterleave">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

Короче говоря, вы заметите, что событие наведения курсора мыши происходит на элементе, когда вы находитесь над ним - происходит от его дочернего ИЛИ родительского элемента, но событие ввода мыши происходит только тогда, когда мышь перемещается извне этого элемента к этому элементу.

Или жекакmouseover() docs положи это:

[.mouseover()] can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.

 11 мая 2014 г., 10:37
ДЕМО - лучшее объяснение;)
 11 июн. 2015 г., 03:24
на самом деле, просто поиграйте с демо.
 11 февр. 2012 г., 17:48
Это не правда, чтоmouseenter «происходит только тогда, когда мышь перемещается от родительского элемента к элементу». Событие происходит, когда мышь меняется сoutside элемент внутри него. Не имеет значения, из какого элемента пришла мышь. Это правда, что мышь часто приходит от родителя, но не всегда. Например, если у родителя нет отступов или границ, то мышь может войти прямо от деда, иmouseenter все еще будет стрелять На самом деле, он может даже войти в элемент снаружи окна просмотра (если элемент находится прямо на краю), и событие все еще срабатывает.

лучший ответ.

I would imagine that, because one of jQuery's goals is to make things browser agnostic, that using either event name will trigger the same behavior. Редактировать: благодаря другим сообщениям, теперь я вижу, что это не тот случай

$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
 });

 21 окт. 2013 г., 05:47
если у вашего элемента нет дочерних элементов, но если у элемента есть дочерние элементы, то пары ведут себя совершенно иначе. Короче говоря, если вы передадите мышь элементу, а затем его дочернему элементу, то будет запущен mouseover / mouseout, тогда как будет активирован только mouseenter, поскольку ваша мышь все еще находится внутри элемента.

Ваш ответ на вопрос