CODEWITHSUNDEEP
javascriptdom-eventsevent-delegation
noob_coder
noob_coder

Reputation: 55

How to check if event target is contained within an element?

I am trying to apply event delegation and so I want to update the text when I click within the li element but when I click inside a element, it won't fire. I don't want to attach the event listener directly to li as the list can be updated and there can be any element type within li.

const menu = document.querySelector('.menu');
const textField = document.querySelector('p');

menu.addEventListener('click', e => {
  if (e.target.matches('li')) {
    textField.textContent = e.target.textContent;
  }
});
li {
  padding: 1em;
  border: 1px solid red;
}

a {
  border: 1px solid blue;
}
<div class="menu">
  <ul>
    <li><a>Home</a></li>
    <li><a>Gallery</a></li>
    <li><a>About us</a></li>
  </ul>

  <p></p>
</div>

Upvotes: 2

Views: 12792

Answers (2)

epascarello
epascarello

Reputation: 207517

If you want the li and not the anchor or any other child element, use closest

const li = e.target.closest("li");
if (li) { /* do whatever */ }

Upvotes: 4

Spectric
Spectric

Reputation: 31992

You can make use of the bubbling effect by attaching a click event listener to the parent list, ul.

const menu = document.querySelector('.menu');
const ul = menu.querySelector('ul');
const textField = document.querySelector('p');

ul.addEventListener('click', e => {
  if(e.target != ul) textField.textContent = e.target.textContent;
});
li {
  padding: 1em;
  border: 1px solid red;
}

a {
  border: 1px solid blue;
}
<div class="menu">
  <ul>
    <li><a>Home</a></li>
    <li><a>Gallery</a></li>
    <li><a>About us</a></li>
  </ul>

  <p></p>
</div>

Upvotes: 0

Related Questions