Знатокам JavaScript

[Nick]

Итак, имеется проблема.

У меня есть блочная таблица с тремя уровнями вложенности. Строчка в ней выглядит примерно так:

<div0>
 <a1 href="...">...[/url]
 <div1>
   <a2 href="...">...[/url]
   <div2>
     <a href="...">...[/url]
     <a href="...">...[/url]
   </div2>
   <a2 href="...">[/url]
 </div1>
</div>

Ну вроде по коду понятно что там. Так вот, мне нужно, чтобы при наведении на ссылки раскрывались соответствующие блоки. то есть, наводим курсор на ссылку a1, показывается блок div1. При наведении на ссылку a2 показывается блок div2. Эту часть реализовать легко. Отстой начинается дальше. Нужно реализовать функционал, чтобы при выведении курсора из внешнего блока, внутренний скрывался. Т.е., При выведении курсора из блока 1 скрывался блок два(если он открыт). Тоже самое с блоком ноль. Если из него вывести курсор, то скрывается блок один.

По идее тут нужно событие onMouseOut. Но если его просто повесить на внешний блок, то оно будет срабатывать даже при наведении курсора на внутренние ссылки и любые другие внутренние блоки. Так просто не прокатывает. Нужно проверять target и relatedTarget. По логике вещей, если курсор покидает внешний блок, то в relatedTarget попадает родительский тэг для внешнего блока. Т.е., при выведении курсор из блока 1 в relatedTarget попадает блок 0.

Вот у меня, туда почему-то попадает постоянно body. Даже если просто переместить курсор внутри блока на другую ссылку. К примеру, с одной ссылки a2 на другую a2. У меня есть подозрение, что это происходит потому, что я повесил функцию на onMouseOut, который прописал для внешнего блока и передаю event внутрь функции.

Примерно так:

onMouseOut = myFunction(event)

А в самой функции я уже проверяю свойства target и relatedTarget для переданного события.

Кто лучше знаком с яваскриптом, куда лучше прописать эту функцию и как реализовать проверку на выход курсора именно из внешних блоков?

Сейчас она у меня выглядит примерно так:

function myFunction(e){
var tg = e.srcElement || e.target; // это проверка перемещений курсора
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
	reltg= reltg.parentNode
if (reltg== tg) return;
       //здесь идет основной код функции - скрытие блоков.	
}

[Dvvarf]

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

function myFunction(event){
var tg = (window.event) ? event.srcElement : event.target;
if (tg.nodeName != 'DIV') return;
var reltg = (event.relatedTarget) ? event.relatedTarget : event.toElement;
if (reltg.nodeName != 'DIV') return;
var reltg2 = reltg;
while (reltg2 != tg && reltg2.nodeName != 'BODY')
	reltg2 = reltg2.parentNode
if (reltg2 == tg) return;
console.log(tg.id+' -> '+reltg.id);
}

Посмотрите в firebug-е (ну или поставьте вместо лога алерт) - функция срабатывает при переходе на внешний уровень (т.е. изнутри дерева - наружу) внутри блоков. При этом в tg - блок откуда ушёл курсор, а в reltg остаётся правильный объект, куда перешёл курсор (а в reltg2 всегда будет body при переходе "изнутри"). Вешать событие на все три блока.

 

upd через 4 дня: ну напишите уже что-нибудь? Мне же тоже интересно, решилась ли проблема.

Edited April 27, 2011 by Dvvarf (see edit history)

[Nick]

А я потерял надежду получить ответ на форумах и сам пошел дальше ковыряться. :)

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