Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Обработка кликов вложенных блоков (https://javascript.ru/forum/jquery/39028-obrabotka-klikov-vlozhennykh-blokov.html)

antserg 12.06.2013 20:38
Обработка кликов вложенных блоков
 
Здравствуйте.
Ссылка (кода минимум):
http://sergcloud.ru/colors.php
Задача такая:
Клик по желтому вложенному блоку должен менять цвет нижнего блока (желтый или красный по очередности). А клик по красному блоку должен менять цвет нижнего блока только на красный.
Проблема в том, что клик по желтому блоку генерирует клик и по красному, так как он в него вложен. Подскажите, пожалуйста, как можно решить данную задачу?

danik.js 12.06.2013 21:19
event.stopPropagation()

BaVa 12.06.2013 21:28 
<!doctype html> 
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function() {
	var one = document.getElementById("one"), two = document.getElementById("two");
	two.onclick = function(e) {
		e = e || window.event;
		if(two.style.backgroundColor == "red") two.style.backgroundColor = "yellow";
		else two.style.backgroundColor = "red";
	};
	one.onclick = function(e) {
		e = e || window.event;
		if(e.eventPhase === 3) return; // если событие вызвалось от всплытия из дочернего элемента то выйти из обработчика
		two.style.backgroundColor = "red";
	};
};
</script>
<style type="text/css">
	#one {
		width: 200px;
		height: 200px;
	}
	#two {
		width: 100px;
		height: 50px;
	}
</style>
</head>
<body>
	<div id="one" style="background: red;">
		one	
		<div id="two" style="background: yellow;">
			two
		</div>
	</div>
</body>
</html>

рони 12.06.2013 21:47
BaVa,
у тега html есть параметр run
[HTML run][/HTML]

BaVa 12.06.2013 21:49
danik.js,
да, с этой функцией по-проще)
<!doctype html> 
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function() {
	var one = document.getElementById("one"), two = document.getElementById("two");
	two.onclick = function(e) {
		e = e || window.event;
		if(e.stopPropagation) e.stopPropagation();
		else e.cancelBubble = true; // для IE < 9
		if(two.style.backgroundColor == "red") two.style.backgroundColor = "yellow";
		else two.style.backgroundColor = "red";
	};
	one.onclick = function() {
		two.style.backgroundColor = "red";
	};
};
</script>
<style type="text/css">
	#one {
		width: 200px;
		height: 200px;
	}
	#two {
		width: 100px;
		height: 50px;
	}
</style>
</head>
<body>
	<div id="one" style="background: red;">
		one	
		<div id="two" style="background: yellow;">
			two
		</div>
	</div>
</body>
</html>

рони,
изменил

danik.js 13.06.2013 01:49
Цитата:
Сообщение от BaVa
if(two.style.backgroundColor == "red") two.style.backgroundColor = "yellow"
Помоему в каком-то браузере формат представления цвета автоматически конвертируется в rgb(xxx,xxx,xxx), так что такое сравнение не будет работать.


Часовой пояс GMT +3, время: 11:54.