Imagine this simple html code:

<section onclick="dosomething(event)">
    <div slot="header" class="collapse-header">
      <div class="collapse-image"></div>
      <div class="collapse-text-price-container">
        <div class="collapse-text">სასაჩუქრე ბარათი 200 ლარი – ტანსაცმლის მაღაზია ZURA & SHARK</div>
        <div minprice="1200"></div>
      </div>
      <div class="center-item-container">
        <div class="status success-status">წაღებული</div>
      </div>
      <div class="center-item-container">
        <div class="date-text">10 იან, 2018</div>
      </div>
      <div class="center-item-container">
        <iron-icon class="icon" icon="bog:chevron-down"></iron-icon>
      </div>
    </div>
    <div slot="body" class="collapse-body">
      <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
    </div>
  </section>

Pay attention to this part of the code : onclick="dosomething(event)". as you see I have many other elements inside outer <section> tag. I also have many sections like that, and on click, I want to get the exact section element which was clicked, How can I do that? event.srcElement sometimes return element inside this section, not the section itself. So what is the solution?

My current solution (which I don't like) is that I take property path or posedPath from event, it's array of elements, and I iterate through it until I find element with tag name section.

Imagine this simple html code:

<section onclick="dosomething(event)">
    <div slot="header" class="collapse-header">
      <div class="collapse-image"></div>
      <div class="collapse-text-price-container">
        <div class="collapse-text">სასაჩუქრე ბარათი 200 ლარი – ტანსაცმლის მაღაზია ZURA & SHARK</div>
        <div minprice="1200"></div>
      </div>
      <div class="center-item-container">
        <div class="status success-status">წაღებული</div>
      </div>
      <div class="center-item-container">
        <div class="date-text">10 იან, 2018</div>
      </div>
      <div class="center-item-container">
        <iron-icon class="icon" icon="bog:chevron-down"></iron-icon>
      </div>
    </div>
    <div slot="body" class="collapse-body">
      <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
    </div>
  </section>

Pay attention to this part of the code : onclick="dosomething(event)". as you see I have many other elements inside outer <section> tag. I also have many sections like that, and on click, I want to get the exact section element which was clicked, How can I do that? event.srcElement sometimes return element inside this section, not the section itself. So what is the solution?

My current solution (which I don't like) is that I take property path or posedPath from event, it's array of elements, and I iterate through it until I find element with tag name section.

• javascript
• html
• css
• dom-events

• 1. .srcElement is a proprietary property introduced by Microsoft in their global event object. The "standardized" way would be to use .addEventListener() which passes a Event object as the first argument into the registered event handler. Then use the standardized target property of it. 2. Have a look at Element.closest() – Andreas Commented Aug 16, 2019 at 10:13

5 Answers 5

Try to change function invoking line like that:

<section onclick="dosomething(this, event)">

and then function:

function dosomething(me, e) {
    console.log(me); // returns the section, which was clicked
    console.log(e.target); // returns the element, which was clicked
}

You could use event.target and pass this from the event to get the source element:

function dosomething(event, source) {
  console.log(source.tagName);
  event.target.classList.add('red');
}

.red {
  color: red;
}

<section onclick="dosomething(event, this)">
  <div slot="header" class="collapse-header">
    <div class="collapse-image"></div>
    <div class="collapse-text-price-container">
      <div class="collapse-text">სასაჩუქრე ბარათი 200 ლარი – ტანსაცმლის მაღაზია ZURA & SHARK</div>
      <div minprice="1200"></div>
    </div>
    <div class="center-item-container">
      <div class="status success-status">წაღებული</div>
    </div>
    <div class="center-item-container">
      <div class="date-text">10 იან, 2018</div>
    </div>
    <div class="center-item-container">
      <iron-icon class="icon" icon="bog:chevron-down"></iron-icon>
    </div>
  </div>
  <div slot="body" class="collapse-body">
    <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
  </div>
</section>

You can use event.target

function dosomething(event) {
  console.log(event.target)
}

<section onclick="dosomething(event)">
    <div slot="header" class="collapse-header">
      <div class="collapse-image"></div>
      <div class="collapse-text-price-container">
        <div class="collapse-text">სასაჩუქრე ბარათი 200 ლარი – ტანსაცმლის მაღაზია ZURA & SHARK</div>
        <div minprice="1200"></div>
      </div>
      <div class="center-item-container">
        <div class="status success-status">წაღებული</div>
      </div>
      <div class="center-item-container">
        <div class="date-text">10 იან, 2018</div>
      </div>
      <div class="center-item-container">
        <iron-icon class="icon" icon="bog:chevron-down"></iron-icon>
      </div>
    </div>
    <div slot="body" class="collapse-body">
      <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
    </div>
  </section>

Or if you just want to get the source section, you just need to pass this to the function.

function dosomething(section) {
  console.log(section)
}

<section onclick="dosomething(this)">
    <div slot="header" class="collapse-header">
      <div class="collapse-image"></div>
      <div class="collapse-text-price-container">
        <div class="collapse-text">სასაჩუქრე ბარათი 200 ლარი – ტანსაცმლის მაღაზია ZURA & SHARK</div>
        <div minprice="1200"></div>
      </div>
      <div class="center-item-container">
        <div class="status success-status">წაღებული</div>
      </div>
      <div class="center-item-container">
        <div class="date-text">10 იან, 2018</div>
      </div>
      <div class="center-item-container">
        <iron-icon class="icon" icon="bog:chevron-down"></iron-icon>
      </div>
    </div>
    <div slot="body" class="collapse-body">
      <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
    </div>
  </section>

You can use this as a parameter and you can get all child elements with "this". For example change below html text: to

And in javascript you can do like this:

function dosomething(event,this) 
{
    var _this = this; // get section element
    var _elem = event.target // get self element
    var childElements = _this.childNodes; //get child elements

    /* if you are using jQuery do like this */
    var xxxElem = $(_this).find(".xxx");
}

You can check class or any specific properties where it is clicked

function (event){

const ele = event.target; }