Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.06.2013, 20:38
Аватар для antserg
Аспирант
Отправить личное сообщение для antserg Посмотреть профиль Найти все сообщения от antserg
 
Регистрация: 14.05.2011
Сообщений: 61

Обработка кликов вложенных блоков
Здравствуйте.
Ссылка (кода минимум):
http://sergcloud.ru/colors.php
Задача такая:
Клик по желтому вложенному блоку должен менять цвет нижнего блока (желтый или красный по очередности). А клик по красному блоку должен менять цвет нижнего блока только на красный.
Проблема в том, что клик по желтому блоку генерирует клик и по красному, так как он в него вложен. Подскажите, пожалуйста, как можно решить данную задачу?
Ответить с цитированием
  #2 (permalink)  
Старый 12.06.2013, 21:19
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

event.stopPropagation()
Ответить с цитированием
  #3 (permalink)  
Старый 12.06.2013, 21:28
Аватар для BaVa
Аспирант
Отправить личное сообщение для BaVa Посмотреть профиль Найти все сообщения от BaVa
 
Регистрация: 16.11.2011
Сообщений: 60

<!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>

Последний раз редактировалось BaVa, 12.06.2013 в 21:50.
Ответить с цитированием
  #4 (permalink)  
Старый 12.06.2013, 21:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

BaVa,
у тега html есть параметр run
[HTML run][/HTML]
Ответить с цитированием
  #5 (permalink)  
Старый 12.06.2013, 21:49
Аватар для BaVa
Аспирант
Отправить личное сообщение для BaVa Посмотреть профиль Найти все сообщения от BaVa
 
Регистрация: 16.11.2011
Сообщений: 60

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>

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

Последний раз редактировалось BaVa, 12.06.2013 в 22:04.
Ответить с цитированием
  #6 (permalink)  
Старый 13.06.2013, 01:49
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сортировка блоков по параметрам webmanss Элементы интерфейса 17 18.06.2016 20:04
Обработка лишних кликов denfer12 Общие вопросы Javascript 2 30.05.2012 12:36
Обработка кликов по картинке PetrS Общие вопросы Javascript 2 21.03.2012 13:13
Обработка кликов по картинке PetrS Мобильный JavaScript 3 20.03.2012 11:36
Задача оптимизации кода по обработке кликов EVGENi jQuery 4 21.01.2012 17:55