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

Question

[ogneog]

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

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


Например, для лучшего понимания, такое визуальное представление.
Мне необходимо, чтобы при нажатии на зеленый контейнер, выводился 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 не срабатывал при таком варианте?)

Answer 1

[Aetae]

Тебе нужен event.stopPropagation(), но лучше всё-таки почитай в учебнике как работают события в javascript, там не сложно, чтоб не тратить своё время на метод тыка.

Comments

[Владимир]

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

[Aetae]

Владимир, не согласен. Точнее это зависит от того как строится код. Если всё делать ручками - может быть. Но лично я ручками давно уже ничего не делаю, а при работе с компонентами(какими бы они ни были) - зоны ответственности разделяются и события с ними. Потому там куда читабельные и нагляднее такой подход, чем один обработчик на всё.

[profesor08]

Владимир, можно увеличить только степень говнокодистости кода. А ведь можно пойти еще дальше, и навесить по одному ивенту каждого типа на body, и разруливать их как-то внутри. Не, каждый раз навешивать ивент на body, чтоб веселее было и дебажить рандомными консольлогами.

Answer 2

[Владимир]

https://developer.mozilla.org/en-US/docs/Web/API/E...
Check "Event delegation"
https://developer.mozilla.org/en-US/docs/Learn/Jav...

Comments

[Aetae]

Лучше тут: https://learn.javascript.ru/bubbling-and-capturing
Хороший учебник на русском, смысла нет на вражеском читать.

[Владимир]

Aetae, What about
https://github.com/tc39/proposals
https://github.com/getify/You-Dont-Know-JS
https://reactjs.org/blog/
https://twitter.com/dan_abramov
https://blog.angular.io/

Answer 3

[ogneog]

Aetae спасибо, данная функция решила вопрос :)

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

 $(".btn2").click(function(event) {
    alert("2222");
 });