Когда выбирать функции mouseover () и hover ()?

112

В чем разница между jQuery .mouseover()и .hover()функциями? Если они абсолютно одинаковы, почему jQuery использует оба?

jquery mouseevent Бходжендра Раунияр
источник
4
Это не повторяющийся вопрос. ваша предоставленная ссылка имеет события mouseover и mouseenter, но моя - события mouseover и hover.
Bhojendra Rauniyar
1
они отличаются тем же, что и mouseover nad mouseleave, и принятый ниже ответ не является точным ... функция зависания добавляет события mouseenter и mouseleve, а не события mouseover и mouseout
Arun P Johny
1
см. jsfiddle.net/arunpjohny/cZb5b/1, переместите указатель мыши от elэлемента к childконсоли и проверьте консоль
Арун П. Джонни,
@ArunPJohny, пожалуйста, перечитайте, это говорит о том, что mouseenter и mouseleave, а не mouseover и mouseout.
Bhojendra Rauniyar
1
также с зависанием - jsfiddle.net/arunpjohny/cZb5b/2, если вы можете проанализировать консоль, вы можете найти разницу ...
Arun P Johny

Ответы:

113

Из официальной документации jQuery

  • .mouseover()
    Привяжите обработчик события к событию JavaScript «наведение курсора» или инициируйте это событие для элемента.

  • .hover() Привяжите один или два обработчика к согласованным элементам, которые будут выполняться, когда указатель мыши входит и покидает элементы.

    Звонок $(selector).hover(handlerIn, handlerOut)- это сокращение от: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

  • .mouseenter()

    Привяжите обработчик события, который будет запускаться, когда мышь входит в элемент, или активируйте этот обработчик для элемента.

    mouseoverсрабатывает, когда указатель перемещается также в дочерний элемент, а mouseenterсрабатывает только тогда, когда указатель перемещается в связанный элемент.

Что это значит

Из - за этого, .mouseover()это не то же самое , как .hover(), по той же причине , .mouseover()это не то же самое .mouseenter().

$('selector').mouseover(over_function) // may fire multiple times

// enter and exit functions only called once per element per entry and exit
$('selector').hover(enter_function, exit_function)
Навин Раунияр
источник
31

.hover()Функция принимает два аргумента функции, один для mouseenterсобытия и один для mouseleaveсобытия.

Мишик
источник
это отличный момент с точки зрения различий между двумя функциями, упомянутыми в заголовке вопроса, спасибо! ознакомьтесь с приведенной ниже ссылкой на w3schools, чтобы узнать, как работает .hover
Bahman.A
8

Вы можете попробовать http://api.jquery.com/mouseover/ на странице документации jQuery. Это приятная небольшая интерактивная демонстрация, которая очень наглядно демонстрирует, и вы действительно можете убедиться в этом сами.

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

Шиваджи Ранавэр
источник
1

Из официальных документов: ( http://api.jquery.com/hover/ )

Метод .hover () связывает обработчики событий mouseenter и mouseleave. Вы можете использовать его, чтобы просто применить поведение к элементу, пока мышь находится внутри элемента.

Wottensprels
источник
1

Как вы можете прочитать на http://api.jquery.com/mouseenter/

Событие mouseenter JavaScript является собственностью Internet Explorer. Из-за общей полезности события jQuery имитирует это событие, так что его можно использовать независимо от браузера. Это событие отправляется элементу, когда указатель мыши входит в элемент. Любой HTML-элемент может получить это событие.

Эдорка
источник