@ogneog

Как проигнорировать контейнер в контейнере?

Здравствуйте.

Есть контейнер в который входят еще три контейнера.
6173f8e43603c763083880.png

Например, для лучшего понимания, такое визуальное представление.
Мне необходимо, чтобы при нажатии на зеленый контейнер, выводился alert("green");
Но, если был нажат желтый контейнер, то выводился только alert("yellow");

Желтым контейнером выступает крестик для закрытия, все остальное служит для перехода к дальнейшим действиям.
Получается не так, как хотелось бы. Если брать отдельно контейнеры и на каждый из них вешать "клик", то пустое место все равно остается и ничего не сработает.

Можно ли сделать какое-то условие с такой логикой:

if(click() == 'green' && click() != 'yellow') { 
Клик на зеленый блок и не по желтому
}


Спасибо.

// UP: мои попытки
$(".close_wrap").click(function() {
  alert("close");
 });

 $(".my_btn").click(function() {
  alert("green");
 });


При нажатии на close_wrap, сначала выводится alert("close"), потом выводится green :)
Как сделать, чтобы green не срабатывал при таком варианте?)
  • Вопрос задан
  • 134 просмотра
Решения вопроса 1
Aetae
@Aetae
Тлен
Тебе нужен event.stopPropagation(), но лучше всё-таки почитай в учебнике как работают события в javascript, там не сложно, чтоб не тратить своё время на метод тыка.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Aleksandr-JS-Developer
@Aleksandr-JS-Developer Куратор тега JavaScript
Лучше проще, чем никогда
Вам нужно использовать делегирование, или перехват, событий.
Вы вешаете обработчик на зеленый блок (контейнер) и уже в обработчике получаете объект события, в объекте события можно узнать куда кликнули. В JS клик по жёлтому элементу сначала сработает на жёлтом элементе, потом на зеленом, потом на родителе зеленого, потом на родителе родителе зеленого и так дальше, до document.

Ссылки:
https://learn.javascript.ru/bubbling-and-capturing
Ответ написан
Комментировать
@ogneog Автор вопроса
Aetae спасибо, данная функция решила вопрос :)

$(".btn1").click(function(event) {
    alert("111");
    event.stopPropagation();
 });

 $(".btn2").click(function(event) {
    alert("2222");
 });
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы