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 是事件所针对的元素，它可能是 inside 您的 data-link 元素（例如 i 和 span 在你的 div 中）。您可以使用 closest method with an attribute presence selector ([attribute-name]) 找到 data-link 元素：

const dataElement = e.target.closest("[data-link]");

检查 e.target 以查看它是否与 CSS 选择器匹配，如果不匹配，则查看其父级以查看是否 it匹配，依此类推，直到到达文档根目录。如果一直到根都找不到它，它 returns 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>

但是，请注意您页面的. You're recreating basic web functionality using non-semantic elements and JavaScript code. That destroys the accessibility，即使对于不依赖辅助技术的用户，这也会让他们无法使用他们浏览器的高级功能（例如）在新标签页中打开 link 等

Answer 2

您将事件侦听器附加到文档正文。您没有获得数据集是绝对正常的：您可以单击 单元格 之外的内容，或者单击其中的一个元素。

您需要将事件附加到具有 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>

Event.target.dataset 返回未定义 javascript

Event.target.dataset returning undefined javascript

javascript

event-listener

custom-data-attribute