Bakitai Bakitai - 1 year ago 43
Javascript Question

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


function productBox(event){
var product = document.getElementsByClassName('product');
for (var g = 0, length = product.length; g < length; g++){


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


So the problem lies in the fact that when the product element is clicked, 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 Source

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.