Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.05.2009, 11:00
Аспирант
Отправить личное сообщение для WalterScott Посмотреть профиль Найти все сообщения от WalterScott
 
Регистрация: 10.05.2009
Сообщений: 57

Событие mouseout при наведении мыши на пункт меню
Делаю обычное выпадающее меню. При наведении мыши на заголовок меню оно выпадает, при onmouseout убирается.
Проблема в том, что onmouseout возникает при перемещении курсора мыши по меню, когда курсор наводится на ссылку - пункт меню. По идее, после mouseout на диве(выпавшем меню), должно возникнуть mouseover на ссылке и так как у ссылки нет своего обработчика события mouseover, событие должно всплыть до дива и меню при этом должно остаться на своем месте(ну или в крайнем случае мигнуть, как бывает в таких случаях). Но меню исчезает.
<html>
<head>
	<style>		
		div.menu ul {padding-top:0; float:right;}
		div.menu ul li {float:left; list-style:none; font-weight:bold; padding-right:15px;  }
		div.menu ul li div.fall { visibility:hidden; background-color:#4682B4; }
	</style>
	<title>Введение в DOM</title>
	<script src="jquery-1.3.2.js"></script>
	<script>
	
			$(document).ready(function() {
			
				var titles = $("div.menu ul li #tab a");
				menuDiv = '';
				for (var i = 0; i < titles.length; i++) {
					var title = titles[i]; 
					title.onmouseover = function(e) {
						if (menuDiv != '') menuDiv.style.visibility = "hidden";
						var e = e || window.event;  
						var t = e.target || e.srcElement; 
						menuDiv = navigator.appName == 'Microsoft Internet Explorer' 
							? t.parentNode.parentNode.childNodes[1] : t.parentNode.parentNode.childNodes[2];
						menuDiv.style.visibility = "visible";

						menuDiv.onmouseout = function(e) {
							menuDiv.style.visibility = "hidden";
						}
						
			
					};

				}
				
			});
	</script>		
</head>
<body>
<div class="menu"> 
    <ul>
		<li class="current"><div id="tab">Главная</div>
		    <div class="fall">
				<a href="">item 1</a>

				<a href="">item 2</a>

				<a href="">item 3</a>

			</div>		
		</li>
		<li><div id="tab"><a href="/chords/about/">Ноты</a></div>
		    <div class="fall">
				<a href="">item 1</a>

				<a href="">item 2</a>

				<a href="">item 3</a>
			
			</div>
		</li>
		<li><div id="tab"><a href="/chords/tab/">Табулатуры</a></div>
		    <div class="fall">
				<a href="">item 1</a>

				<a href="">item 2</a>

				<a href="">item 3</a>
			
			</div>		
		</li>
		<li><div id="tab"><a href="/chords/services/">Доска обьявлений</a></div>
		    <div class="fall">
				<a href="">item 1</a>

				<a href="">item 2</a>

				<a href="">item 3</a>
			
			</div>		
		</li>
		<li><div id="tab"><a href="/chords/feedbacks/">Контакты</a></div>
		    <div class="fall">
				<a href="">item 1</a>

				<a href="">item 2</a>

				<a href="">item 3</a>
			
			</div>		
		</li>
	</ul> 
</div>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 11.05.2009, 02:29
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

в общем-то у меня работает, только в ff можно не успеть перевести курсор на подменю - нужна задержка

кроме того, почему onmouseover ставится на ссылку, а не на весь div? Пользователю будет проще попасть по div'у

почему onmouseout назначается только после появления подменю?

menuDiv = navigator.appName == 'Microsoft Internet Explorer' 
                            ? t.parentNode.parentNode.childNodes[1] : t.parentNode.parentNode.childNodes[2];

откуда такой ... код?
t.parentNode.parentNode.getElementsByTagName('div')[1]


var el = <получение ссылки на DOM-объект>;
el.on... = function() {
   ...el...
}

это очень распространенный способ добиться memory leak'ов. Лучше уж хранить ссылку на div в самом DOM-элементе (this.menuDiv = ...)

лучше не использовать глобальные переменные (menuDiv)

переменная title тоже может приводить к memory leak'ам (не уверен), я бы сделал как-то так
$(".level1 a").each( function(
   this.onmouseover = ...
) {});


нельзя двум и более элементам задавать один и тот же id
Ответить с цитированием
  #3 (permalink)  
Старый 12.05.2009, 22:05
Аспирант
Отправить личное сообщение для WalterScott Посмотреть профиль Найти все сообщения от WalterScott
 
Регистрация: 10.05.2009
Сообщений: 57

Сообщение от x-yuri
t.parentNode.parentNode.getElementsByTagName('div' )[1]
Cпасибо, спорол горячку(я, в смысле).


Сообщение от x-yuri
лучше не использовать глобальные переменные (menuDiv)
Да, в данном случае можно обойтись без глобальной переменной:
$(document).ready(function() {
			
				var titles = $("div.menu ul li #tab a");
				
				for (var i = 0; i < titles.length; i++) {
					var title = titles[i]; 
					title.onmouseover = function(e) {
						var submenus = $("div.menu ul li div.fall");
						for (var j = 0; j < submenus.length; j++) {
								if (submenus[j].style.visibility == "visible") 
								submenus[j].style.visibility == "hidden";
						}
						var e = e || window.event;  
						var t = e.target || e.srcElement; 
						menuDiv = t.parentNode.parentNode.getElementsByTagName('div')[1];
						menuDiv.style.visibility = "visible";

						menuDiv.onmouseout = function(e) {
							menuDiv.style.visibility = "hidden";
						}
						
					};
				}
				
			});
но первый вариант лучше по производительности, потому что выделенное подменю я храню в переменной между вызовами функции, вместо того, чтобы каждый раз искать его заново.

Сообщение от x-yuri
var el = <получение ссылки на DOM-объект>;
el.on... = function() {
...el...
}

это очень распространенный способ добиться memory leak'ов.
Ну, это может случиться в случае большого количества элементов. А у меня всего лишь обычное верхнее меню.


Сообщение от x-yuri
нельзя двум и более элементам задавать один и тот же id
Знаю, это просто небрежность с моей стороны.

Последний раз редактировалось WalterScott, 13.05.2009 в 10:38.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое изменение размеров блока при наведении мыши! Viktor ------- Общие вопросы Javascript 7 05.05.2009 19:13
Объект при загрузке страницы и после операций над ним fact jQuery 7 20.04.2009 22:02
Ссылка под слоем перекрывает слой Devider Общие вопросы Javascript 7 24.02.2009 23:18
Dojo может подгружать информацию из пунктов меню только при клике на выбранный пункт? vlad275 Dojo toolkit 0 30.10.2008 15:56
Не отрабатывает событие onmouseout при внедрении нового слоя ilshat Элементы интерфейса 3 28.07.2008 06:27