title: How do you get just the parent element of a click event when event.target is returning the children?
body: <p>JavaScript</p>
  
  <pre><code>function productBox(event){
      event.stopPropagation();
      console.log(event.target);
  }
  var product = document.getElementsByClassName('product');
  for (var g = 0, length = product.length; g &lt; length; g++){
      console.log('here');
      product[g].addEventListener('click',productBox);
  }
  </code></pre>
  
  <p>HTML </p>
  
  <pre><code>&lt;div class="product"&gt;
      &lt;div class="productContent"&gt;
         &lt;img src="file:///C|/Users/Jacob/Downloads/12939681_1597112303636437_733183642_n.png" /&gt;
      &lt;/div&gt;
      &lt;div class="productName"&gt;
           Here
      &lt;/div&gt;
      &lt;div class="productDescription"&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I've thought perhaps,</p>
  
  <p>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.</p>
  
  <p>Any thoughts?</p>