onmouseover/onmouseout

[bes]

Ситуация такая.
Есть два div, второй div скрыт и в нём, например, ссылка.
Если навести указатель мыши на первый div, то отобразится второй div с ссылкой, так вот если размер этой ссылки будет больше размера первого div (чего можно добиться путём масштабирования страницы), то сместив указатель мыши непосредственно вправо (оставаясь в пределах второго div, но выйдя за пределы первого div), второй div снова становится скрытым (хотя вроде бы этого не должно было произойти), если же размер ссылки меньше размера первого div, то подобного не наблюдается.

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

Подскажите, что конкретно происходит в данной ситуации.

Вот пример.

<style>
div {  
  position: absolute;
  left: 0px; 
  top: 0px; 
  padding: 2%;
}
</style>

<div style="width: 3%; height: 60%; background: lightgrey" 
  onmouseover="document.getElementById('d').style.display = 'block'"
>
</div>

<div id=d style="width: 20%; height: 50%; background: gray; display: none"
  onmouseout = "this.style.display = 'none'"
><a href="">content</a>
</div>

[bes]

Эй, народ, неужели никто не встречался с подобной ситуацией??

[Pavel M.]

в вашем примере http://jsbin.com/uwovuh/edit#preview
у меня в хроме и ff второй div появляется и не скрывается пока мышь не выйдет за его пределы, с первым никак не связано - так и должно, вроде, быть.

в каком браузере получилась ваша ситуация?

[bes]

Pavel M., отмасштабируй страницу так, чтобы ссылка content оказалась больше по размеру, чем размер первого div, тогда увидишь, что смещение мыши с той части ссылки, которая вышла за пределы первого div, приведёт к скрытию второго div раньше, чем мышь выйдет за его пределы.
Если размер ссылки меньше размера первого div, то скрытия не происходит (хотя некоторое короткое поддёргивание всё же можно заметить).
Данный случай одинаково происходит как в хроме, так и в IE.

[dmitriymar]

mouseleave,mouseenter -для тех что поддерживают,для остальных эмулировать

Эй, народ, неужели никто не встречался с подобной ситуацией??

может,прежде чем панты колотить стоит просмотреть темы ранее?

[Pavel M.]

сейчас, только понял, что речь шла про ссылку, когда на нее курсор попадал, конечно, срабатывало mouseout у второго дива.

тогда как dmitriymar верно сказал
лучше использовать mouseleave

чтобы самому не эмулировать используйте, например, jquery как, например, в примере
http://jsbin.com/uwovuh/2/edit#preview

[bes]

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

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

Тема про события мыши вроде бы неплохо раскрыта и в http://learn.javascript.ru/mouse-events, хотя применить предложенные там сведения у меня не получается, попробую на основе имеющейся там информации расписать, что происходит в приведённом примере:

1) Навели мышь на первый div - сработал обработчик onmouseover у этого div, в результате появился второй div (здесь всё понятно).

2) Навели мышь на ссылку (дочерний элемент для второго div) - по идее должен сработать onmouseover у ссылки (обработчик не задан, ничего не происходит) и onmouseout у второго div (обработчик задан, второй div должен скрыться, результат, конечно, будет виден, если наведение происходит за пределами первого div, так как иначе после скрытия второго div у первого div сработает onmouseover и второй div снова отобразится).
Так и происходит, если запретить всплытие событий event.cancelBubble = true (Pavel M., в приведённом примере скрытие второго div происходит не при наведении мыши на ссылку, а при её уходе со ссылки).
Но по умолчанию, события всплывают (или явно разрешены event.cancelBubble = false).
И это первое, что не понятно: события всплывают, а при наведении мыши на ссылку второй div не скрывается.

3) Уводим мышь за пределы ссылки, находясь на втором div и за пределами первого div, по идее должны сработать onmouseout у ссылки и onmouseover у второго div,
но в приведённом примере срабатывает onmouseout у второго div, это, как я понимаю, обозначает, что при уходе с дочернего элемента на родительский у родительского элемента возникает событие onmouseout.
И это второе, что не понятно: почему у родительского элемента элемента возникает событие onmouseout при уходе на него с дочернего элемента.

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

[Pavel M.]

я думаю вам надо сделать обработчики событий для всех трех элементов, в обработчиках прописать console.log(название события) и последить в отладчике что происходит

[bes]

Pavel M., спасибо за правильный совет протестировать данный пример (слона-то надо сразу замечать).

Результаты моего тестирования:
1) действительно, при уходе на дочерний элемент всегда срабатывает последовательность onmouseout у родителя, onmouseover у дочернего элемента (в статье это отмечено)
2) неотключённое всплытие событий приводит при заходе/уходе на дочерний элемент к соответствующим событиям (заход/уход) на родителе (вот эта последовательность мне до конца не была понятна).

Собственно, эти положения и дают ответ: по первому положению, при заходе на ссылку всегда произойдёт событие onmouseout у второго div (и приведёт его к скрытию), а по второму положению, уход мыши со ссылки при неотключённом всплытии событий, также приведёт к вызову onmouseout у этого второго div.