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

153

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

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

informatik01
источник

Ответы:

118

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

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

Или, какmouseover() сказано в документации :

[ .mouseover()] может вызвать много головных болей из-за пузырей событий. Например, когда указатель мыши перемещается по элементу Inner в этом примере, событие mouseover будет отправлено на него, а затем накапливается до Outer. Это может вызвать наш связанный обработчик при наведении мыши в неподходящее время. Смотрите обсуждение для .mouseenter()полезной альтернативы.

Кит Бентруп
источник
40
Это неправда, что mouseenter«происходит только тогда, когда мышь перемещается от родительского элемента к элементу». Событие происходит, когда мышь переходит от внешнего элемента к внутреннему. Неважно, из какого элемента пришла мышь. Это правда, что мышь часто приходит от родителя, но не всегда. Например, если родитель не имеет отступов или границ, тогда мышь может войти прямо от деда и mouseenterвсе равно будет стрелять. Фактически, он может даже ввести элемент снаружи области просмотра (если элемент находится прямо на краю), и событие все еще срабатывает.
Каллум
2
DEMO - лучшее объяснение;)
Luckylooke
на самом деле, просто поиграйте с демо.
Кевин Уилер
43

Mouseenter и mouseleave не реагируют на всплывающие события, в то время как mouseover и mouseout делают .

Вот статья, которая описывает поведение.

Джозеф
источник
6
Это объясняет это отлично: bl.ocks.org/mbostock/5247027 при наведении мыши срабатывает каждый раз, когда он запускается из контейнера, из-за пузырьков событий.
Рафаэль Эмшофф
4

Как часто бывает с такими вопросами, Quirksmode имеет лучший ответ .

Я полагаю, что, поскольку одна из целей jQuery - сделать браузер независимым, использование любого имени события вызовет одинаковое поведение. Редактировать: благодаря другим сообщениям, теперь я вижу, что это не тот случай

Питер Бейли
источник
0
$(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);})
 });

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