вопрос по classList.toggle

288

24 мая 2017, 07:28

как сделать что бы при нажатии на div с классом test у элемента c айди test убирался класс foo если он был до этого установлен , и если нажать на элемент с классом test-2 то класс foo в элементе #test удалиться , но у div с классом test установлен onclick по этому не удаляется класс foo у #test, можно было бы написать классу .test при клие test.classList.remove("foo") но новые элементы могут быть добавлены динамически

var h = document.getElementsByClassName("test"); 
	h[0].onclick = function(e){ 
			this.classList.toggle("foo"); 
			e.stopPropagation(); 
			 
		} 
     
  
 document.addEventListener("click",(e)=>{ 
	e.stopPropagation(); 
	e.preventDefault(); 
	e = e.target; 
	while(e) 
		if (e == test) 
			return 
		else 
			e = e.parentNode; 
	test.classList.remove("foo"); 
}); 
 
test.addEventListener("click",function(){ 
	this.classList.toggle("foo"); 
});

#test{ 
			width: 300px; 
			height: 300px; 
			background: #000; 
			transition: 0.4s; 
		} 
		.test{ 
			width: 300px; 
			height: 300px; 
			background: #000; 
			transition: 0.4s; 
      margin: 10px; 
		} 
    .test-2{ 
			width: 300px; 
			height: 300px; 
			background: #000; 
			transition: 0.4s; 
		} 
 
		/*script interaction*/ 
		.foo{ 
			width: 400px !important; 
			height: 400px !important; 
			background: red !important; 
		}

<!-- div id test and add dynamic class toggle -> foo --> 
	<div id="test"></div> 
	 
	<div class="test"></div> 
	<div class="test-2"></div>

Answer 1

Можно навесить обработчик на document с помощью addEventListener, передав третьим параметром useCapture=true, чтобы таким образом перехватывать все события внутри дерева, а в обработчике выполнять проверку.

Пример:

function listener(e) { 
  if (e.target != test) { 
    test.classList.remove('foo'); 
  } else { 
    test.classList.add('foo'); 
  } 
} 
 
document.addEventListener('click', listener, true);

#test { 
	width: 300px; 
	height: 300px; 
	background: #000; 
	transition: 0.4s; 
} 
 
/*script interaction*/ 
.foo { 
	width: 400px !important; 
	height: 400px !important; 
	background: red !important; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
</head> 
<body> 
	 
	<!-- div id test and add dynamic class toggle -> foo --> 
	<div id="test"></div> 
	 
</body> 
</html>

Answer 2

document.addEventListener("click",(e)=>{ 
	e.preventDefault(); 
	e = e.target; 
	while(e) 
		if (e == test) 
			return 
		else 
			e = e.parentNode; 
	test.classList.remove("foo"); 
}); 
 
test.addEventListener("click",function(){ 
	this.classList.add("foo"); 
});

#test { 
	width: 300px; 
	height: 300px; 
	background: #000; 
	transition: 0.4s; 
} 
 
.foo { 
	width: 400px !important; 
	height: 400px !important; 
	background: red !important; 
}

<div id="test"></div>

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

переход на страницу выбраную в select [требует правки]

есть селект, со списком категорий, как сделать автоматический переход на выбранную категорию? без кнопок

270

javascript

Нужна помощь в написании функции JS

Есть задание - "Написать фунцию concat (), которая принимает любое количество аргументов и объединяет их в одну строкуСимвол разделения по умолчанию...

294

javascript

.getHours() для переменной

Планирую получить значение времени (часов) и если оно больше определённого значения то один вариант действий, если меньше то другой, ниже...

320

javascript

Нужен алгоритм для сравнения по уровням данным в массиве

Есть объект с родственниками, они соотносятся друг к другу по типу: Родитель, Ребенок, Брат/Сестра, Равный

335