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

问题描述 投票:0回答:3

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

javascript event-listener custom-data-attribute
3个回答
3
投票

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


1
投票
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>
 


0
投票
e.target.dataset.link

使用 e.currentTarget.dataset.link

© www.soinside.com 2019 - 2024. All rights reserved.