Почему наступает событие onmouseout?

Xoce · April 22, 2010

Вот мой код

<div id="green" style="background-color: green; padding: 50px;" onmouseout="document.getElementById('red').style.display='none'">

	<div id="yellow" style="background-color: yellow; padding: 50px;" onmouseover="document.getElementById('red').style.display=''">1</div>

	<div id="red" style="background-color: red; padding: 50px; display: none;">2</div>

</div>

Задача:

1. При наведении на желтый блок нужно отобразить красный блок. Это получается.

2. Затем нужно спрятать красный блок, но только после того как мышка покинет зеленый блок. Это не получается.

Не понятно почему срабатывает увод мышки с желтого блока на зеленый...? по логике ведь я нахожусь внутри зеленого блока...

Edited April 22, 2010 by Xoce

s0rr0w · April 22, 2010

Не понятно почему срабатывает увод мышки с желтого блока на зеленый...? по логике ведь я нахожусь внутри зеленого блока...

Вы зашли в дом, потом в квартиру. Вы вышли из квартиры, но дом вы еще не покинули. Чтобы покинуть дом - нужно выйти из дома.

Тут аналогично. Исправляется при помощи stopPropagation у нормальных браузеров, и cancelBubble = true у ненормального ИЕ.

Great Rash · April 22, 2010

Там все проще сделать можно

Ща с обеда приду - сварганю код.

psywalker · April 22, 2010

Там все проще сделать можно
Ща с обеда приду - сварганю код.

Приятного тебе аппетита дружище

Great Rash · April 22, 2010

Приятного тебе аппетита дружище

Спасибо . И тебе тоже!

Мда, не так уж и просто оно все получается как я сперва подумал...

Вот такая хитрая загогулина у меня получилась после прочтения длинной и очень интересной статьи с сайта quirksmode.org (всем советую в закладки кинуть вот эту и вот эту страницы).

Код:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Фильтр</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px Verdana, Tahoma, sans-serif;
		}

		body {
			margin: 10px;
		}
	</style>

	<script type="text/javascript">
		function removeDiv(e) {
			// получаем ссылку на Event
			e = e || window.event;
			// это элемент, который запустил эвент
			var target = e.target || e.srcElement;
			// это элемент, с которого распространяется эвент
			var reltarget = (e.relatedTarget) ? e.relatedTarget : e.toElement;

			// если у элемента, запустившего эвент,
			// id не равен нужному - т.е. не равен зеленому,
			// то останавливаем работу функции
			if (target.id != 'green') {
				return;
			}

			// бежим по DOM вверх
			while (reltarget && reltarget != target) {
				reltarget = reltarget.parentNode;
			}

			// если элемент, с которого пошло распространение эвента
			// является элементом, который запустил эвент (т.е. желтый),
			// то тоже останавливаем функцию
			if (reltarget == target) {
				return;
			}

			document.getElementById('red').style.display = 'none';
		}

		// функция для навешивания слушателей
		// ружна для того, чтоб в Мозилле включить
		// event bubbling (третий параметр в функции addEventListener - false который)
		// т.е. событие будет распространяться вверх а не вниз (если я правильно понимаю)
		function addListener(el, ev, fn) {
			if (document.addEventListener) {
				el.addEventListener(ev, fn, false);
			} else if (document.attachEvent) {
				el.attachEvent('on' + ev, fn);
			} else {
				el['on' + ev] = fn;
			}
		}

		// на onload навешиваем слушатель на зеленый див
		window.onload = function() {
			var greenDiv = document.getElementById('green');

			addListener(greenDiv, 'mouseout', function(e) {
				removeDiv(e);
			});
		}
	</script>
</head>

<body>

	<div id="green" style="background-color: green; padding: 50px;">
		<div id="yellow" style="background-color: yellow; padding: 50px;" onmouseover="document.getElementById('red').style.display = 'block';">1</div>
		<div id="red" style="background-color: red; padding: 50px; display: none;">2</div>
	</div>

</body>
</html>

Он до конца не дописан - я еще не допер как бы эвент навесить красиво для желтого дива.

Xoce · April 22, 2010

Вы зашли в дом, потом в квартиру. Вы вышли из квартиры, но дом вы еще не покинули. Чтобы покинуть дом - нужно выйти из дома.

Вот мне как раз и не понятно, почему выходя из желтой квартиры (див) срабатывает событие, которое должно работать, только тогда, когда я выхожу из зеленого дома...

monkeymafia · April 29, 2010

Вы со своими квартирками и домиками рвете мне моск

Мой совет вынеси onMouseOver и onMouseOut - в функции сверхку. Задай JS функцию к примеру changeSomething (x,mystyle). В нее получи значение 1 или 2 , а также стиль который надо изменить.

if (x == 1) {}

if (x == 2) {}

в скобках соответственно прописывай что тебе надо

document.getelementByID(mystyle).style.background = '#336699';

А в самих элементах прописывай <div onmouseover="changeSomething(1,'red');" onmouseout="" ....

Sign In

Почему наступает событие onmouseout?

Question

Xoce

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Xoce

Link to comment

Share on other sites

monkeymafia

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information