.mouseout + setTimeout в .click, почему сразу после .click срабатывает событие .mouseout?

Question

[Саша]

Ссылка на фиддл

Пример кода тут:

<div class="th">
    <div class="overlay"></div>
</div>

$('.overlay').click(function(){
	var thisParent = $(this).parent('.th');
	thisParent.addClass('th-active');
	thisParent.mouseout(function(){
		setTimeout(function(){
			thisParent.removeClass('th-active');
		}, 1000);
	});
});

Почему сразу после .click если не выводить курсор за элемент срабатывает событие .mouseout ?

Answer 1

[Алексей Зуев]

1. overlay внутри th

2. Исходя из кода внутренний блок убегает вниз на всю высоту родителя

thisParent.addClass('th-active');
.th-active .overlay{
    transform:translateY(100%);
}

Примечание
Попробуйте установить 50% и при первом клике держите курсор выше мнимой 50% линией, потом кликните ниже.

3. Открываем документацию

The mouseout event is fired when a pointing device (usually a mouse) is moved off the element that has the listener attached or off one of its children.

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

Mouseout активируется, когда указатель мыши входит или выходит в/из дочерний(го) элемент(а), в то время как mouseleave этого не делает.

Интересное сравнение mouseout и mouseleave

Вывод: используйте mouseleave

Дополнение к комментарию
Насчет случая с hover в вашем примере нет ничего удивительного, если посмотреть исходники jquery

jQuery.fn.extend({
	hover: function( fnOver, fnOut ) {
		return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
	},

То есть mouseleave в любом случае получит обработчик, но при отсутствии fnOut вызовется повторно ваша первая функция.

Comments

[Саша]

Алексей Зуев: Спасибо!
Есть еще вопрос на интерес, если сравнивать .mouseover() и .hover().
.mouseover() не удивил, действует по типу как .mouseout(), но вот .hover() желал лучшего, а оказалась проблема.
Например как видим .hover() срабатывает даже когда элемент теряет "ховер", почему так?

[Алексей Зуев]

userAlexander: Добавил в ответ

[Саша]

Алексей Зуев: Спасибо)

Answer 2

[Андрей]

сотый раз напишу
click - устаревший метод, используйте .on('click'....)

Comments

[Илья Шатохин]

И в сотый раз зря. Читайте API jquery

As the .click() method is just a shorthand for .on( "click", handler ).

И не слова об устаревании данного метода.

[Саша]

.click() не работает с новодобавленными в DOM элементами, а .on( "click" работает.
В большинстве использую .click(), если структура явно не будет подгружена через аякс или чего подобное.

[Илья Шатохин]

userAlexander:

.click() не работает с новодобавленными в DOM элементами, а .on( "click" работает.

"Все смешалось: люди, кони..." ©
"Новодобавленными" это вы, видимо, про всплывающие события? Это немного другое.