I have a line of HTML code:
<a href="/posts" class="nav__link" data-link><i class="fa fa-file"></i><span>Pages</span></a>
and then I catch the event, cancel the transition by the link using my handler:
document.body.addEventListener("click", e => {
if (e.target.matches("[data-link]")) {
e.preventDefault();
navigateTo(e.target.href);
}
});
As long as there is only text in the a tag, everything is fine, but as soon as nested span, i, and so on tags appear in it, this code does not work when you click on them.
How can I change this JS code so that it also applies to nested elements?
You might use .closest method:
document.body.addEventListener("click", e => {
if (e.target.closest('a').matches("[data-link]")) {
e.preventDefault();
navigateTo(e.target.href);
}
});
function navigateTo() {
console.log("let's go!")
}a,
a i,
a span {
display: inline-block;
padding: .5em;
border: solid 1px
}<a href="/posts" class="nav__link" data-link><i class="fa fa-file">Nested element</i> <span>Another Nested element</span> Link tag itself</a>