Javascript / Jquery одиночное целевое делегирование события

Question

Я понял, что избыточность цели в будущем может вызвать много проблем в будущем, когда они связаны с другим событием на следующем уровне.

Например, когда у меня есть элемент Div внутри другого.

<div id='div1'>
  <div id='div2>
  </div>
</div>

Я использую следующий код Jquery для привязки события.

$('div').bind('click', function(event){
   alert(event.target.id)
}

Есть два окна предупреждения вместо одного. Я понимаю, почему так происходит, потому что я нажимаю 2 деления.

Конечно, проблема на более глубоком уровне заключается в том, что когда я пытаюсь связать событие после этого события соответственно с event.target, оно связывает x2 и так далее и так далее.

Можно ли избавиться от привязки события на внешнем div и захватить только внутреннюю.

Заранее спасибо.

Answer 1

Вы можете предотвратить всплытие события , используя event.stopPropgation() следующим образом:

$('div').bind('click', function(event){
  alert(event.target.id);
  event.stopPropagation();
});

Вы можете попробовать его здесь .Это «поймает» в ловушку click на первом <div>, который его получит, и не позволит ему распространяться до родителей.

Answer 2

Я думаю, вам просто нужно выбрать внутренний div в вашем вызове bind:

$('div:eq(0)').bind('click', function(event){
   alert(event.target.id)
}