KBEPT
06.09.2010, 19:04
------------------------------------------------------------------------
Здравствуйте всем.
Пишу к Вам с просьбой наставить меня на путь истинный в мире программинга.
Я заплутал немного в понимании и нужен совет в решении одной из проблема.
Дано.
Фрагмент исходного когда.
Допустим это основное меню на сайте.
<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. Убедительная просьба писать по существу.
---- ---- ---- ----
Всем спасибо большое.
Здравствуйте всем.
Пишу к Вам с просьбой наставить меня на путь истинный в мире программинга.
Я заплутал немного в понимании и нужен совет в решении одной из проблема.
Дано.
Фрагмент исходного когда.
Допустим это основное меню на сайте.
<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. Убедительная просьба писать по существу.
---- ---- ---- ----
Всем спасибо большое.