Event.target.dataset 返回未定义的 javascript

Question

我在尝试获取任何 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 事件侦听器。

Answer 1

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 功能。这会破坏页面的“可访问性”，即使对于不依赖辅助技术的用户来说，这也使他们无法使用浏览器的高级功能（例如）在新选项卡中打开链接等.

Answer 2

cell

之外的内容，或单击其中的元素。 您需要使用

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>
 

Answer 3

e.target.dataset.link

使用 e.currentTarget.dataset.link