我在尝试获取任何 html 元素的 data 属性时遇到一些问题。
问题是我在 30% 的情况下获取数据属性。其余的返回未定义。
这是我想要触发的:
document.addEventListener("DOMContentLoaded",() => {
document.body.addEventListener("click",(e) => {
console.log("clicked");
console.log(e.target.dataset.link + " is the link clicked") // this is returning undefined most of the times.
if (e.target.dataset.link !== undefined) {
console.log("got the link")
navigateTo(e.target.dataset.link);
}
})
// router();
})
<div class="cell" data-link="/dashboard/posts" tabindex="1">
<i class="material-icons">assignment</i>
<span>Posts</span>
</div>
这怎么可能?
我怎样才能防止这种情况发生?
我无法删除正文的 onclick 事件侦听器。
event.target
是事件针对的元素,可能位于 data-link
元素的 inside(如
i
中的 span
和 div
)。您可以使用 closest
方法 和属性存在选择器 ([attribute-name]
) 来查找 data-link
元素:
const dataElement = e.target.closest("[data-link]");
它会检查
e.target
是否与 CSS 选择器匹配,如果不匹配,则查看其父级以查看 it 是否匹配,依此类推,直到到达文档根目录。如果一直到达根而没有找到它,则返回 null
。
更新片段:
document.addEventListener("DOMContentLoaded",() => {
document.body.addEventListener("click",(e) => {
const dataElement = e.target.closest("[data-link]");
if (!dataElement) {
return; // There wasn't one
}
console.log(dataElement.dataset.link + " is the link clicked") // this is returning undefined most of the times.
if (dataElement.dataset.link !== undefined) {
console.log("got the link")
// navigateTo(dataElement.dataset.link);
}
})
// router();
})
<div class="cell" data-link="/dashboard/posts" tabindex="1">
<i class="material-icons">assignment</i>
<span>Posts</span>
</div>
但是,请注意evolutionxbox的评论。您正在使用非语义元素和 JavaScript 代码重新创建基本的 Web 功能。这会破坏页面的“可访问性”,即使对于不依赖辅助技术的用户来说,这也使他们无法使用浏览器的高级功能(例如)在新选项卡中打开链接等.
之外的内容,或单击其中的元素。 您需要使用
data-link
属性将事件附加到所需的元素:
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('[data-link]').forEach(node => {
node.addEventListener("click", (e) => {
console.log("clicked");
console.log(node.dataset.link + " is the link clicked")
})
})
})
<div class="cell" data-link="/dashboard/posts">
<i class="material-icons">assignment</i>
<span>Posts</span>
</div>
<div class="cell">
<i class="material-icons">assignment</i>
<span>Posts</span>
</div>
使用 e.currentTarget.dataset.link