How do you get just the parent element of a click event when event.target is returning the children?

Question

JavaScript

function productBox(event){
    event.stopPropagation();
    console.log(event.target);
}
var product = document.getElementsByClassName('product');
for (var g = 0, length = product.length; g < length; g++){
    console.log('here');
    product[g].addEventListener('click',productBox);
}

HTML

<div class="product">
    <div class="productContent">
       <img src="file:///C|/Users/Jacob/Downloads/12939681_1597112303636437_733183642_n.png" />
    </div>
    <div class="productName">
         Here
    </div>
    <div class="productDescription">

    </div>

So the problem lies in the fact that when the product element is clicked, event.target returns the actual child element of the event listener. For example, i click a "product" and it'll return productContent, productName or productDescription as the target, when actually what i want is the "product" element and then to do a.childNodes and find the image within that.

Please note jQuery is not an option, it is 30kb of stuff i won't use as this is a static html page with barely any javascript.

I've thought perhaps,

doing a check if the element is 'product' if not, take the parent and check if it's a 'product', if not go to that parent and so on. Then find the img tag within that. But i feel like that is a long winded work around.

Any thoughts?

Answer 1

To get the element to which the handler is bound, you can use this within the handler.

As @DaveNewton pointed out, the event object has a .currentTarget property that can be used as well. This is nice because you can have functions that have a manually bound this using .bind() or you may be using the new arrow functions , which have a this defined by its original environment, making it impossible to get the bound element that way.

Answer 2

You can use parentElement property of the target.

function productBox(event){
    var target = event.target;
    var parent = target.parentElement;//parent of "target"
    //Rest of your code
}

Answer 3

I asked a similar question: if you have a element.click(function(){}) and the element has two or multiple siblings. If the event trigger is attached to the parent and not the target, this post popped up and is actually irrelevant to my question so I decided to post my search here for someone else.

I used this method:

if (target.closest('.NEftune').attr('rel') != undefined){
 /*do something here*/ 
}

The closest method in jQuery and JavaScript starts from the clicked target and then bubbles up until it finds an attribute you looking for. In my case the event was attached to an Element with the class (.NEftune) and by adding an extra attribute I could determine if I was inside the container (.NEftune) which has an image inside.

Answer 4

I know it's a bit late, but the simplest solution to get the actual target to which the event handler was attached to is to use the event currentTarget property.

This will avoid unnecessary further DOM check and works out of the box on all modern browsers.

Event.currentTarget on MDN

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.