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

【问题标题】：Event.target.dataset returning undefined javascriptEvent.target.dataset 返回未定义的 javascript
【发布时间】：2022-01-08 17:46:17
【问题描述】：

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

【问题讨论】：

请不要使用 div 重新创建链接功能。只需使用a 元素
@evolutionbox 我正在构建一个 SPA，所以我必须这样做。我没有使用任何反应或其他东西。刚刚创建了我自己的。
我认为你不必这样做。

标签： javascript event-listener custom-data-attribute

【解决方案1】：

event.target 是事件所针对的元素，它可能在您的data-link 元素内部（就像您的div 中的i 和span）。您可以使用 closest method 和属性存在选择器 ([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's comment。您正在使用非语义元素和 JavaScript 代码重新创建基本的 Web 功能。这会破坏您页面的accessibility，即使对于不依赖辅助技术的用户，他们也无法使用浏览器的高级功能（例如）在新选项卡中打开链接等.

【讨论】：

【解决方案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>

【讨论】：