javascript - 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 内元素(如 i 中的 span 和 div )。您可以使用 closest method使用属性存在选择器 ( [attribute-name] ) 来查找 data-link元素:

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

检查e.target查看它是否与 CSS 选择器匹配，如果不匹配，则查找其父级以查看它是否匹配，依此类推，直到到达文档根目录。如果它一直到达根而没有找到它，则返回 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即使对于不依赖辅助技术的用户，他们也无法使用浏览器的高级功能(例如)在新选项卡中打开链接等。