Javascript.RU

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

О наследовании событий, или как корректно его отменить.
Вопрос родился по итогам стати Введение в события. Замечательная статья. Но задавшись элементарным вопросом, так и не смог реализовать его решение.

Смысл в следующем, создаем несколько вложенных слоев. (Как в примерах статьи) И на первый из них вешаем событие:

<style type="text/css">
.d1
{
	width:400px;
	height:400px;
	background:#0F0;
}

.d2
{
	width:300px;
	height:300px;
	background:#FF0000;
}

.d3
{
	width:200px;
	height:200px;
	background:#0000FF;
}
</style>

<div class="d1" id="d1" onmouseover="alert('test')">  
	<div class="d2" id="d2">  
		<div class="d3" id="d3"></div>  
	</div>  
</div>


Насколько я понял из стати div c id="d2" наследует событие от div c id="d1", и div c id="d3" наследует событие от div c id="d2"

Но вот как как ОСТАНОВИТЬ срабатывание события на "дочерних" к первому элементах, оставив по прежднему срабатывание алерта при событии на первом слое (с id="d1") на всей поверхности слоя, в т.ч. и перекрытой слоями d2 и d3.

Следующий JS код отменит срабатывание события для слоя d2 (и как следовательно для d3):

document.getElementById('d2').onmouseover = function(e)
{
	if (!e) e = event || window.event; // кросс-браузерно
	{
		e.cancelBubble = true;
		if (e.preventDefault) e.preventDefault();
	}
}

Но и для области слоя d1 перекрытому слоем d2 тоже отменит.

Обьясняя проще в IE с версии 5.5 была введена функция onmouseenter и она срабатывает именно так как мне и требуется. Но исползовать ее глупо. Т.к. решение не кроссбраузерное.

Очень надеюсь на помощь профессионалов. Если не примером кода то хотя бы тычком носом в статью или еще какой мануал. Где было бы разжевано как реализовать выше изложенное.
Ответить с цитированием
  #2 (permalink)  
Старый 08.02.2010, 08:47
Аватар для Мараторий
Кандидат Javascript-наук
Отправить личное сообщение для Мараторий Посмотреть профиль Найти все сообщения от Мараторий
 
Регистрация: 22.01.2010
Сообщений: 114

Внутренние дивы не наследуют никаких событий.
Рассмотрим click. При нажатии на внутренний див браузер смотрит, есть ли обработчик на нем, если есть, то выполняет функцию.
Дальше событие всплывает и срабатывает на родителе этого дива. Потом всплывает дальше, и т.д.
При этом всплытие можно остановить.
Чтобы решить вашу задачу, необходимо проверять, на каком элементе сработало событие.
Ответить с цитированием
  #3 (permalink)  
Старый 08.02.2010, 09:08
Новичок на форуме
Отправить личное сообщение для JCShen Посмотреть профиль Найти все сообщения от JCShen
 
Регистрация: 08.02.2010
Сообщений: 5

Все верно говорите, алерт будет срабатывать именно дойдя до того родителя на котором происходит событие. Если бы мне требовалось запускать какую то функцию по onClick я бы не стал беспокоить умных людей и задавать дурацкие вопросы. Только в приведеном мной примере проведя курсором от начала до конца первого слоя мы получим срабатывание события onMouseOver три раза. Т.е. Каждый раз когда пересекаем границу родительского и дочернего элемента.
Смысл и цель вопроса именно в том что бы функция срабатывала только один раз. А не три.
Ответить с цитированием
  #4 (permalink)  
Старый 08.02.2010, 10:35
Аватар для Мараторий
Кандидат Javascript-наук
Отправить личное сообщение для Мараторий Посмотреть профиль Найти все сообщения от Мараторий
 
Регистрация: 22.01.2010
Сообщений: 114

Сообщение от Мараторий Посмотреть сообщение
Чтобы решить вашу задачу, необходимо проверять, на каком элементе сработало событие.
Для mouseover нужно проверять элементы срабатывания (откуда и куда)
Ответить с цитированием
  #5 (permalink)  
Старый 08.02.2010, 11:01
Новичок на форуме
Отправить личное сообщение для JCShen Посмотреть профиль Найти все сообщения от JCShen
 
Регистрация: 08.02.2010
Сообщений: 5

Пример Кода ?
Ответить с цитированием
  #6 (permalink)  
Старый 08.02.2010, 15:03
Аватар для PeaceCoder
Профессор
Отправить личное сообщение для PeaceCoder Посмотреть профиль Найти все сообщения от PeaceCoder
 
Регистрация: 15.12.2009
Сообщений: 742

То о чем вы говорите события moseenter и mouseleave/ Работают не везде.
__________________
Настоящий программист думает и осознает сам решение задачи, а не копирует другие мысли, не осознавая их (c)
Относись к человеку так же, как хотелось бы отношения к себе (с)
Все нужно там, где оно нужно, а все не нужно нигде (с) Gozar
B~Vladi: А кто такой JavaScript стрелок?! micscr: это тот, кто не jQuery танкист.
Программы становятся медленнее быстрее, чем компьютеры становятся быстрее (с) Никлаус Вирт
Ответить с цитированием
  #7 (permalink)  
Старый 08.02.2010, 17:17
Новичок на форуме
Отправить личное сообщение для JCShen Посмотреть профиль Найти все сообщения от JCShen
 
Регистрация: 08.02.2010
Сообщений: 5

Точнее работают только в IE, вот мне и нужно какое-то кросбраузерное решение. т.е. Своя обертка для этих двух функций.
Ответить с цитированием
  #8 (permalink)  
Старый 08.02.2010, 21:05
Аватар для PeaceCoder
Профессор
Отправить личное сообщение для PeaceCoder Посмотреть профиль Найти все сообщения от PeaceCoder
 
Регистрация: 15.12.2009
Сообщений: 742

Скажу проще. Когда происходит событие onmouse* проверяйте содержит ли нужный элемент элемент target. Да - игнорируем, Нет - настоящее событие на входа/выхода стрелки
if (this===e.target || !this.contains(e.target)) {обрабатываем}

Ток еще надо подработать функцию .contains
__________________
Настоящий программист думает и осознает сам решение задачи, а не копирует другие мысли, не осознавая их (c)
Относись к человеку так же, как хотелось бы отношения к себе (с)
Все нужно там, где оно нужно, а все не нужно нигде (с) Gozar
B~Vladi: А кто такой JavaScript стрелок?! micscr: это тот, кто не jQuery танкист.
Программы становятся медленнее быстрее, чем компьютеры становятся быстрее (с) Никлаус Вирт

Последний раз редактировалось PeaceCoder, 08.02.2010 в 21:08.
Ответить с цитированием
  #9 (permalink)  
Старый 09.02.2010, 00:00
Новичок на форуме
Отправить личное сообщение для JCShen Посмотреть профиль Найти все сообщения от JCShen
 
Регистрация: 08.02.2010
Сообщений: 5

Ок. Спасибо за совет... где то в этом направлении сейчас и думаю.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как определить нажата какая-либо клавиша или нет? Бобр Общие вопросы Javascript 34 11.11.2016 18:42
как обратиться к childNode по его id в div-е, через id родителя kichSman Events/DOM/Window 5 28.10.2009 02:16
Как определить цвет (темный он или светлый)? mouse_web Элементы интерфейса 6 22.07.2009 14:35
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30
Переменная от переменной или как к имени переменной конкатенировать значение другой Aderba jQuery 5 12.11.2008 15:25