点击事件只获取父 div

Question

I am having issues with onclick events triggered on parent elements but not on children. I have an image grid created through JavaScript:

HTML div:

JavaScript to append images to this image-grid div:

var columnDiv = document.createElement('div');
columnDiv.setAttribute('class', 'column');

// create content div inside column
var contentDiv = document.createElement('div');
contentDiv.setAttribute('class', 'content');
contentDiv.setAttribute('data-animation_url', element['animation_url'])
contentDiv.setAttribute('data-image_url', element['image_url'])
// create image and append to contentDiv
var image = document.createElement('img');
image.setAttribute('src', image_gateway_url);
image.setAttribute('style', 'width:100%');
contentDiv.appendChild(image);
// add image name
var caption = document.createElement('span');
caption.setAttribute('class', 'image-name')
caption.innerHTML=element['name'];
contentDiv.appendChild(caption);

// append content div to column and append it to the grid
columnDiv.appendChild(contentDiv);
document.getElementById('image-grid').appendChild(columnDiv);

CSS:

#image-grid{
    margin: auto;
    position:absolute;
    z-index: -1;
}

.column {
    float: left;
    width: 25%; 
    height: 35vh;
    position: relative;
    z-index: 0;
  }

.content {
    background-color: white;
    padding: 10px;
    position: relative;
    z-index: 1;
  }

JavaScript code for click event:

$('div').click(function() {
    var myClass = this.className;
    alert(myClass);
      });

When clicking on images, the event triggers the alert 'gallery-grid' wherever I click. From other posts I would expect the event to trigger on children first then work its way up towards the parent but for some reason it is not the case here...

Does anyone happen to know how I could access the 'content' class div with my onclick event to redirect users to the page relevant to the image they clicked?

Thank you

Answer 1

The issue was caused by the use of this instead of event.target.

This code now allows to iterate over all parent divs until I find the one I am interested in:

    $('div').click(function(event) {
    let currentElement = event.target;
    while(currentElement.className != 'content') {
        currentElement=currentElement.parentNode;
    };
    alert(currentElement.className);

})