我有一行 HTML 代碼：
<a href="/posts" class="nav__link" data-link><i class="fa fa-file"></i><span>Pages</span></a>
然后我捕獲事件，使用我的處理程式通過鏈接取消轉換：
document.body.addEventListener("click", e => {
if (e.target.matches("[data-link]")) {
e.preventDefault();
navigateTo(e.target.href);
}
});
只要a標簽中只有文本，一切都很好，但是一旦其中出現嵌套的span、i等標簽，當您單擊它們時，此代碼將不起作用。
如何更改此 JS 代碼以使其也適用于嵌套元素？
uj5u.com熱心網友回復：
您可以使用.closest方法：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/428652.html
標籤：javascript html
上一篇：在react-routerV6中使用URL引數的簡單方法是什么
下一篇：如何將段落元素放到下一行