Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.09.2010, 19:04
Интересующийся
Отправить личное сообщение для KBEPT Посмотреть профиль Найти все сообщения от KBEPT
 
Регистрация: 06.09.2010
Сообщений: 23

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. Убедительная просьба писать по существу.

---- ---- ---- ----
Всем спасибо большое.
Ответить с цитированием
  #2 (permalink)  
Старый 06.09.2010, 19:20
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

var elem = e.target || e.srcElement;
while (elem.nodeName.toLowerCase() != 'li' && (elem = elem.parentNode));
if (elem.id) {/*.....*/}
Ответить с цитированием
  #3 (permalink)  
Старый 06.09.2010, 20:38
Интересующийся
Отправить личное сообщение для KBEPT Посмотреть профиль Найти все сообщения от KBEPT
 
Регистрация: 06.09.2010
Сообщений: 23

Сообщение от Riim Посмотреть сообщение
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>
...


---- ---- ---- ----
Поставил плюсик Вам
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
addEventListener gosha_kap Общие вопросы Javascript 7 06.07.2012 02:32
because browser doesn't fire events to the elements beneath the dragged object belbek Общие вопросы Javascript 1 30.08.2010 16:15
addEventListener Namolem Events/DOM/Window 6 11.04.2010 23:46
addEventListener фаза mycoding Общие вопросы Javascript 2 31.01.2010 13:52
events Виталий Общие вопросы Javascript 23 26.01.2009 22:11