Javascript.RU

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

Игнорирование дочерних объектов на событие
Добрый день. Столкнулся с не большой проблемой, но решить ее сам так и не смог.

Ситуация следующая: есть меню, при наведении на меню создается <div id='abc'> (принадлежащий body, position absolute), в котором выводим подменю (<ul>...</ul>). Навели мышкой - создался див - показал меню, теперь его нужно закрыть. Закрыть нужно по onmouseout='close(this/this.id)', при условии, если мы вытащим мышку из этого дива 'abc'. Но проблема встает, тогда, когда мы наводим на созданный в этом диве <ul></ul> - блок сразу закрывается (хотя нам нужно этим <ul></ul> пользоваться). Если мышой обходить <ul></ul> внутри созданного дива, а потом выйти мышой из дива - все в порядке, закрывается как и нужно. Но если на вести на <ul> - тут же закрывается. Задача игнорить не нужные события, что находится в этом диве, кроме самого дива.

Пробовал следующие и не помогло :
функция закрытия дива(abc) {
if (<ul>){вернуть фалсе}
елсе {
закрыть abc;
}
}
<ul onmouseout='return false;'>
див.присвоитьДочь(<ul>)
z-index:99 / - 99

Думаю, что задача не сложная для того, кто с этим сталкивался!
Буду заранее благодарен в помощи.
Ответить с цитированием
  #2 (permalink)  
Старый 09.09.2012, 11:31
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

function hover (opt) {
	
 opt.elem.onmouseover = ElemMouseAction;	 
 opt.elem.onmouseout = ElemMouseAction;
 	
 function ElemMouseAction (evt) {
  var related, Call;
  var e = evt || event;	 
 
	if(e.type == 'mouseover'){  
	  Call = opt.over; 
	  related = e.relatedTarget || e.fromElement;
	  
	} else {
	  Call = opt.out; 
	  related =  e.relatedTarget || e.toElement;
	  
		}
		
			
	while (related && related != this) {
		related = related.parentNode;
		} 
	  
	  if(related == this) return;
	 
	  Call();
	 
	 }	

	
	}
	
hover({
	elem:document.getElementById('#bla'),
	over:function () {// срабатывает при mouseover
		
		},
	out:function (){// срабатывает при mouseout
		
		}	
	
	});
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #3 (permalink)  
Старый 09.09.2012, 12:46
Интересующийся
Отправить личное сообщение для kingrus Посмотреть профиль Найти все сообщения от kingrus
 
Регистрация: 02.02.2011
Сообщений: 28

Сообщение от cyber
03 opt.elem.onmouseover = ElemMouseAction;
04 opt.elem.onmouseout = ElemMouseAction;
Сразу же на это идет ругня baga
Мб я не так, что делаю...
если можно коммент напишите на "function hover (opt)" и function ElemMouseAction (evt) без коммента тяжко разобрать
Ответить с цитированием
  #4 (permalink)  
Старый 09.09.2012, 12:56
Интересующийся
Отправить личное сообщение для kingrus Посмотреть профиль Найти все сообщения от kingrus
 
Регистрация: 02.02.2011
Сообщений: 28

неужели нет выхода попроще?)
Ответить с цитированием
  #5 (permalink)  
Старый 09.09.2012, 13:14
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

функцию писал для себя и поправил интерфейс (упростил) когда заливал на форум, поправил прям в форме коммента, щас гляну где ступил
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #6 (permalink)  
Старый 09.09.2012, 13:20
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

ошибка тут
document.getElementById('#bla')
по привычке написал с решеткой (обычно использую querySelectorAll).
пример:
<!DOCTYPE HTML>
<html>
  <head>
 <style>
   
   #bla {
     width:200px;
     height:200px;
     border:5px solid black;
   
   
   }
   
    </style>
  </head>
  <body>
    <div id='bla'>
   
    </div>
    <script>
function hover (opt) {
	
 opt.elem.onmouseover = ElemMouseAction;	 
 opt.elem.onmouseout = ElemMouseAction;
 	
 function ElemMouseAction (evt) {
  var related, Call;
  var e = evt || event;	 
 
	if(e.type == 'mouseover'){  
	  Call = opt.over; 
	  related = e.relatedTarget || e.fromElement;
	  
	} else {
	  Call = opt.out; 
	  related =  e.relatedTarget || e.toElement;
	  
		}
		
			
	while (related && related != this) {
		related = related.parentNode;
		} 
	  
	  if(related == this) return;
	 
	  Call();
	 
	 }	

	
	}
	
hover({
	elem:document.getElementById('bla'),
	over:function () {// срабатывает при mouseover
	alert('over');	
		},
	out:function (){// срабатывает при mouseout
		
      alert('out');
		}	
	
	});



    </script>

  </body>
</html>

Сообщение от kingrus Посмотреть сообщение
неужели нет выхода попроще?)
и так просто вариант.

Сообщение от kingrus Посмотреть сообщение
Сразу же на это идет ругня baga
Мб я не так, что делаю...
если можно коммент напишите на "function hover (opt)" и function ElemMouseAction (evt) без коммента тяжко разобрать
в нутрь если не знаешь тут лучше не лезть можно запутаться тут
if(e.type == 'mouseover'){  
	  Call = opt.over; 
	  related = e.relatedTarget || e.fromElement;
	  
	} else {
	  Call = opt.out; 
	  related =  e.relatedTarget || e.toElement;
	  
		}

просто передаете элемента , и функцию которая выполняется при over и out.
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #7 (permalink)  
Старый 09.09.2012, 13:21
Интересующийся
Отправить личное сообщение для kingrus Посмотреть профиль Найти все сообщения от kingrus
 
Регистрация: 02.02.2011
Сообщений: 28

просто для примера - в итоге я хочу поулчить меню amazon.com , т.е. при наведении (или клике) на меню создается блок с выводом подменю и прочей ерундой (при этом меню в созданном блоке активное), но при выводи мыши из блока - блок удаляется.
Ответить с цитированием
  #8 (permalink)  
Старый 09.09.2012, 13:22
Интересующийся
Отправить личное сообщение для kingrus Посмотреть профиль Найти все сообщения от kingrus
 
Регистрация: 02.02.2011
Сообщений: 28

я даже на джикверный # внимание не обратил... (
Ответить с цитированием
  #9 (permalink)  
Старый 09.09.2012, 13:31
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

Сообщение от kingrus Посмотреть сообщение
просто для примера - в итоге я хочу поулчить меню amazon.com , т.е. при наведении (или клике) на меню создается блок с выводом подменю и прочей ерундой (при этом меню в созданном блоке активное), но при выводи мыши из блока - блок удаляется.
для меню лучше css
Сообщение от kingrus Посмотреть сообщение
я даже на джикверный # внимание не обратил... (
а не это не jquer, это чистый js просто jquery использует document.querySelectorAll(selector) ...
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #10 (permalink)  
Старый 09.09.2012, 13:42
Интересующийся
Отправить личное сообщение для kingrus Посмотреть профиль Найти все сообщения от kingrus
 
Регистрация: 02.02.2011
Сообщений: 28

я имел ввиду $('#bla').....
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно подавить событие при подключении своего обработчика? Маэстро Firefox/Mozilla 2 03.09.2011 10:46
Отловить событие simple Events/DOM/Window 3 11.05.2011 13:20
Как фоновое изображение дочерних объектов... DDSSDD Элементы интерфейса 4 11.04.2011 17:52
Быстрый поиск объектов Shasoft Общие вопросы Javascript 7 30.07.2009 04:28
какое событие возникает во время формирования html IT-AleX Events/DOM/Window 2 20.02.2009 15:13