How to identify the clicked child element through the click parent element event

Question

How to identify the clicked child element through the click parent element event

I have the following code:

<div class="tipo-cadastro">
    <div class="box-logista active">Logista</div>
    <div class="box-distribuidor">Distribuidor</div>
</div>

And the following code in javascript / jQuery:

$('.tipo-cadastro').click((e) => {
    $('.tipo-cadastro').find('div').removeClass('active');
    $(e.currentTarget).addClass('active');
});

My problem is that inside my function e.currentTarget corresponds to the parent element, i.e. the element that has the event click.

I know I could use the click event directly on each child element. But I would like to know if it is possible through the click event on the parent element to know which child element was clicked?

0

html javascript jquery ecmascript-6

Author: alan, 2017-02-01

Source

1 answers

score 1 · Accepted Answer

You can use target:

$('.tipo-cadastro').click((e) => {
  console.log(e.target);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tipo-cadastro">
  <div class="box-logista active">Logista</div>
  <div class="box-distribuidor">Distribuidor</div>
</div>