LINUX.ORG.RU
Форум — Web-development  

[js] Обработка событий onmouseover и onmouseout

 


0

0 

Всем привет.

Столкнулся с такой проблемой: есть див (button), по наведению на 
который появляется другой див (list) со списком городов. Исчезать
 список (list) должен только тогда, когда курсор выходит за его пределы.

Для этого я обрабатываю события onmouseover и onmouseout для списка
 (list) но проблема в том, что когда этот див появляется, сначала
 происходит событие mouseover, а вслед за ним сразу mouseout и список
 исчезает.

Как это можно побороть?

Вот так примерно выглядит описаная схема:

              +-------------+
              |   button    |
   +----------+-------------+
   |      list              |
   |  1. elem1              |
   |  2. elem2              |
   +------------------------+
← кто видел такую штуку при наведении мышкой на картинку
совместная разработка на разных ОС →

Скорее всего ты не отслеживаешь, от какого элемента происходит событие.

>сначала происходит событие mouseover, а вслед за ним сразу mouseout и список исчезает.

Потому что обрабатываются у тебя, вероятно, события не только list, но и всех его элементов (elem1 и elem2).

Читай внимательно спеку:

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow

anonymfus ★★★★
()
Ответ на: комментарий от anonymfus

> Скорее всего ты не отслеживаешь, от какого элемента происходит событие.

Не, про это я в курсе и собия отслеживаю только с дива list, а события его элементов игнорятся.

Вот в таком порядке происходят события (лог из функиций-обработчиков):

city_button
DIV city_list
over
DIV city_list
out

Сначала переходим на кнопку (button), после курсор передвигается на list и поочередно происходят события mouseover и сразу же mouseout!

it-partizan ★
() автор топика
Ответ на: комментарий от it-partizan

Если этот способ не подойдет (например ссылка не устроит), то можешь использовать whatever:hover - вот старинное руководство по использованию (но файл всеравно качай свежий) http://www.umade.ru/log/2004/07/30.html - работает как часы - в результате лечится знаменитый баг ишака, добавляя hover для любого элемента

Orlangoor ★★★★★
()
Ответ на: комментарий от Orlangoor

Вот простой минимальный пример кода:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
<html>
<head>
<!--[if IE]>
<style type="text/css">
body{behavior:url(csshover.htc);}
</style>
<![endif]-->
<style type="text/css">
#popup ul{
display:none;
}
#popup:hover ul{
display:block;
}

</style>
</head>
<body>
<div id="popup">
<h2>Список городов:</h2>
<ul>
<li><a class="links" href="http://ya.ru">город 1</a></li>
<li><a class="links" href="http://ya.ru">город 2</a></li>
<li><a class="links" href="http://ya.ru">город 3</a></li>
<li><a class="links" href="http://ya.ru">город 4</a></li>
<li><a class="links" href="http://ya.ru">город 5</a></li>
</ul>
</div>
</body>
</html>

Orlangoor ★★★★★
()
Ответ на: комментарий от AndreyKl

>да уж.. как часы.. только тормозит при инициализации в ишаке, если страница большая...

Весьма и весьма незаметно оно тормозит - я по крайней мере тормозов даже на старом железе и хорошо сверстаных страницах не замечал

Orlangoor ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← кто видел такую штуку при наведении мышкой на картинку
Web-development
совместная разработка на разных ОС →