On my website, I have some div elements with some content. Each of the elements is supposed to be clickable. I could add a separate event listener to each one, but I would rather have a single event listener attached to the container. To better explain the document structure, I have added an example below.
<div id="container">
<div>
<h1>Element 1</h1>
<p>Lorem ipsum...</p>
</div>
<div>
<h1>Element 2</h1>
<p>...dolor sit amet...</p>
</div>
</div>
Now my question is the following: I know that using event.target gets me the actual element that has been clicked, which - when using one event listener that is attached to the div with the ID container - could be the container, one of the direct children, or the text elements inside them. How can I determine which of the inner div elements - if any - the user clicked, even if the target is not the div itself?
If there is a different/simpler solution using JQuery, I would also be interested in that.
If you don't need the contents of each div (p and h1) to have interactive elements (such as form items), then you can add an extra div wrapper that is unclickable :). Now all your click targets will be the first child divs.
document.querySelector("#container").addEventListener("click", (e) => console.log(e.target)).unclickable {
pointer-events:none;
}<div id="container">
<div>
<div class="unclickable">
<h1>Element 1</h1>
<p>Lorem ipsum...</p>
</div>
</div>
<div>
<div class="unclickable">
<h1>Element 2</h1>
<p>Lorem ipsum...</p>
</div>
</div>
</div>Given your comments under the question your goal is to find an effective way to determine if the user clicked on the outer div or one of the child elements.
To do that you compare the target property of the event, which is the element that raised the event, to the currentTarget property, which will always be the element the event was bound to. The logic would look something like this:
$('#container').on('click', e => {
if (e.target == e.currentTarget) {
console.log('clicked on parent');
} else {
console.log(`clicked on child element - ${e.target.tagName}`);
}
});#container {
border: 1px solid #000;
padding: 10px;
}
#container > div {
display: inline-block;
border: 1px solid #CCC;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div>
<h1>Element 1</h1>
<p>Lorem ipsum...</p>
</div>
<div>
<h1>Element 2</h1>
<p>...dolor sit amet...</p>
</div>
</div>Note that the CSS in the above example is just to make the bounds of each element more visible.