Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.08.2009, 13:54
Новичок на форуме
Отправить личное сообщение для Fliand Посмотреть профиль Найти все сообщения от Fliand
 
Регистрация: 02.08.2009
Сообщений: 8

Выпадающее меню(неправильно назначает обработчик события)
Вот хочу написать выпадющее меню без jquery, чтоб меню не сразу скрывалось, а через промежуток времени.
Хочу чтоб все выглядело так:
1)Функция search_elem, искала элементы LI, у которых присутствует узел UL, и вызывала функцию assign_event
2)Функция assign_event - эта функция должна вешать обработчик события на элементы и останавливать всплытие(вызовом функции stop_bubbling).
3)Функция stop_bubbling, думаю здесь все понятно.

Вот начал писать код, и столкнулся с проблемой. Почему-то функция assign_event, вешает события не только на нужный элемент, но и на всех его потомков, я никак немогу это прекратить, всплытие получается убирать, а это нет.

По идеи при наведение в моем коде на элемент имеющий потомка ul, должно появляться сообщение (alert). Но оно появляется на всех.

Вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Menu</title>
<script type="text/javascript">

[JS]var menu_id = "navbar";

var speed_show = 50;
var speed_hide = 1000;

function search_elem() {
	var elem = document.getElementById(menu_id).getElementsByTagName("li");
	
	for(i in elem) {
		var list = elem[i].childNodes;
		
		//alert(elem[i].nodeName);
		
		for(a in list) {
			if(list[a].nodeName == "UL") {
				//alert(list[a].nodeName);
				assign_event(elem[i], list[a]);
			}
		}
	}
}

function assign_event(elem, list) {
	elem.onmouseover = function() {
		//alert(list.nodeName);
		//list.style.display = "block";
		
		alert("yes");
		stop_bubbling();
	}
		
	//elem.onmouseout = start_hide;
}



function stop_bubbling(event) {
    event = event || window.event;
 
    if (event.stopPropagation) event.stopPropagation();
    else event.cancelBubble = true;
}

onload = search_elem;
[/JS]
</script>

<style type="text/css">
#navbar, #navbar ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#navbar li {
	float: left;
}
#navbar a {
	background: #999999;
	color: #FFFFFF;
	display: block;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	padding: 5px;
	cursor: pointer;
}
#navbar a:hover { 
	color: #E2144A;
	background: #CCCCCC; 
}
/*styles for sub-navbar*/ 
#navbar ul {
	display: block;
	position: absolute;
	width: 150px;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#navbar ul li {
	float: none;
}
#navbar ul a {
	background: #666666;
	padding: 3px;
}
#navbar ul ul {
	margin-top: -19px;
	margin-left: 150px;
}
</style>
</head>
<body>
<div>
<ul id="navbar">
  <li><a hover="#">home</a></li>
  <li><a hover="#">service</a>
    <ul>
      <li><a href="#">php</a></li>
      <li><a href="#">java script</a>
        <ul>
          <li><a href="#">jQuery</a></li>
          <li><a href="#">asp.net</a>
            <ul>
              <li><a hover="#">web-design</a></li>
              <li><a hover="#">web-codding</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">jsp</a></li>
      <li><a href="#">xhtml</a></li>
    </ul></li>
  <li><a hover="#">buy</a></li>
  <li><a hover="#">about us</a></li>
  <li><a hover="#">contacts</a></li>
</ul>
</div>

Последний раз редактировалось Fliand, 09.08.2009 в 14:05.
Ответить с цитированием
  #2 (permalink)  
Старый 09.08.2009, 15:17
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Не уверен, что не работает из-за этого, но вы не передаете объект события в вашу функцию stop_bubbling():
function assign_event(elem, list) {
    elem.onmouseover = function(e) {
        //alert(list.nodeName);
        //list.style.display = "block";
 
        alert("yes");
        stop_bubbling(e);
    }
 
    //elem.onmouseout = start_hide;
}
 
 
 
function stop_bubbling(event) {
    event = event || window.event;
 
    if (event.stopPropagation) event.stopPropagation();
    else event.cancelBubble = true;
}
Ответить с цитированием
  #3 (permalink)  
Старый 09.08.2009, 17:24
Новичок на форуме
Отправить личное сообщение для Fliand Посмотреть профиль Найти все сообщения от Fliand
 
Регистрация: 02.08.2009
Сообщений: 8

Передал, но не помогло. В чем дело?
Ответить с цитированием
  #4 (permalink)  
Старый 10.08.2009, 17:11
Новичок на форуме
Отправить личное сообщение для Fliand Посмотреть профиль Найти все сообщения от Fliand
 
Регистрация: 02.08.2009
Сообщений: 8

Ну подскажите
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Назначить на обработчик события метод обьекта Logo Общие вопросы Javascript 11 20.06.2009 23:40
Обработчик события: как делает jquery? Shasoft jQuery 35 22.04.2009 09:41
Обработчик события click BOGDAN Общие вопросы Javascript 6 02.03.2009 20:52
отправка файла через обработчик события submit starrich AJAX и COMET 2 13.08.2008 22:29