Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Events. addEventListener. (https://javascript.ru/forum/events/11670-events-addeventlistener.html)

KBEPT 06.09.2010 18:04

Events. addEventListener.
 
------------------------------------------------------------------------
Здравствуйте всем.
Пишу к Вам с просьбой наставить меня на путь истинный в мире программинга.
Я заплутал немного в понимании и нужен совет в решении одной из проблема.


Дано.
Фрагмент исходного когда.
Допустим это основное меню на сайте.

<html>
...
 <ul class="testing" id="pages">  
     <li id="page_01"><a href="#01">Page_01</a></li>
     <li id="page_02"><a href="#02">Page_02</a></li>
     <li id="page_03"><a href="#03">Page_03</a></li>
 </ul>  
...
</html>


Задача.
Необходимо определить, на каком пункте меню, в данный момент установлен курсор мышки.
То есть необходимо определить куда хочет кликнуть и перейти пользователь.
То есть определить id одного из трех <li>, над которым находится курсор мышки.

Мое решение.
В принципе получить id элемента несложно.
Я получал достаточно простым способом:

<html>
...
<script language='javascript'>
  function get_id(elem) 
  { 
    var object_id = elem.id; 
    alert(object_id);
  }
</script>
...
 <ul class="testing" id="pages">  
     <li id="page_01" onMouseOver="get_id(this)"><a href="#01">Page_01</a></li>
     <li id="page_02" onMouseOver="get_id(this)"><a href="#02">Page_02</a></li>
     <li id="page_03" onMouseOver="get_id(this)"><a href="#03">Page_03</a></li>
 </ul>  
...
</html>


Решение некроссбраузерное, проверял лишь в Opera 10.
Мне сейчас важно понять лишь ошибку мою или чего не хватает в коде.

Так вот. Верхний пример отлично определяет id того <li> над которым сейчас расположен курсор мышки.
Но как видно по примеру, запись совершенно нерациональная.
Допустим у нас будет 20 пунктов и для каждого пункта у нас по 3 обработчика - onMouseMove, onMouseOver и onMouseOut.
Естественно это получается мягко-говоря неправильно.

По-этому я решил сделать что-то вроде GlobalHook (Глобальный Хук/Перехват) всех событий в текущем документе.
Вышел следующий вариант примера:

<html>
...
<body>
...
 <ul class="testing" id="pages">  
     <li id="page_01"><a href="#01">Page_01</a></li>
     <li id="page_02"><a href="#02">Page_02</a></li>
     <li id="page_03"><a href="#03">Page_03</a></li>
 </ul>  
...
</body>

<script language='javascript'>
  var my_global_hook = function(e) 
  { 
    var object_id = e.srcElement.id; 
    alert(object_id);
  }
  document.addEventListener('mouseover', my_global_hook, false);
</script>

</html>


И вот тут я столкнулся с проблемой ...
Работает в Opera все правильно, как мне и надо, но только события отлавливаются не те, что мне нужны.
Как видно из примера, все теги <li> являются контейнерами для тегов ссылок <a>, то есть теги <li> являются родителями.
А события отлавливаются именно для ссылок <a>, а не для <li>, чьи id мне и нужны.
Таким образом, все события отлавливаются на максимальную "глубину" вложения элементов.

Вопрос.
Как мне получить id именно тегов <li> ?

---- ---- ---- ----
Примечания.
1. Организовать нужно без использования JQuery и XPath.
2. Убедительная просьба писать по существу.

---- ---- ---- ----
Всем спасибо большое.

Riim 06.09.2010 18:20

var elem = e.target || e.srcElement;
while (elem.nodeName.toLowerCase() != 'li' && (elem = elem.parentNode));
if (elem.id) {/*.....*/}

KBEPT 06.09.2010 19:38

Цитата:

Сообщение от Riim (Сообщение 69932)
var elem = e.target || e.srcElement;
while (elem.nodeName.toLowerCase() != 'li' && (elem = elem.parentNode));
if (elem.id) {/*.....*/}

---- ---- ---- ----

Спасибо большое.
Вот что мне нужно было: nodeName и parentNode.

Я с Вашего позволения для себя откорректировал предложенный Вами код.
Ваш код отлично работает и выполняет то что нужно.
Просто если есть возможность хоть немного разгрузить скрипт, я всегда стараюсь это делать :) Извиняюсь :)
В моем случае родителем тега <a> всегда будет тег <li>, это если брать именно эту связку.
Таким оборазом получается, что всегда будет:
...
<li> <a> ... </a> </li>
...


Выходит для моего случая немного проще (избавился от цикла):
...
<script language='javascript'> 
  var my_global_hook = function(e)  
  {  
    if ( (e.srcElement.nodeName.toLowerCase() == 'a') && (e.srcElement.parentNode.nodeName.toLowerCase() == 'li') ) 
	  { var object_id = e.srcElement.parentNode.id; }
    alert(object_id); 
  } 
  document.addEventListener('mouseover', my_global_hook, false); 
</script>
...


---- ---- ---- ----
Поставил плюсик Вам :)


Часовой пояс GMT +3, время: 11:04.