Event.target.dataset returning undefined javascript - Stack Overflow

admin管理员组

文章数量:1289893

I am getting some issues while trying to get the data attribute of any html element.

The problem is i am getting the data attribute in 30% of the cases. The rest is returning undefined.

Here's what i want to trigger:

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>

I am getting some issues while trying to get the data attribute of any html element.

The problem is i am getting the data attribute in 30% of the cases. The rest is returning undefined.

Here's what i want to trigger:

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>

How is this even possible ?

And how can i prevent this ?

I can't remove the onclick event listener for the body.

• javascript
• event-listener
• custom-data-attribute

Share Improve this question Follow edited Dec 2, 2021 at 8:12 evolutionxbox 4,12266 gold badges3838 silver badges5757 bronze badges asked Dec 2, 2021 at 8:10 SaswatSaswat 34911 gold badge55 silver badges1616 bronze badges 3

• 1 Please do not recreate link functionality using a div. Just use the a element – evolutionxbox Commented Dec 2, 2021 at 8:13
• @evolutionbox I am building a SPA so I had to do this. I am not using any react or something. Just created my own. – Saswat Commented Dec 2, 2021 at 12:33
• I don't think you had to do that. – evolutionxbox Commented Dec 2, 2021 at 12:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

event.target is the element the event was targeted at, which may be inside your data-link element (like the i and span in your div). You can use the closest method with an attribute presence selector ([attribute-name]) to find the data-link element:

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

That checks e.target to see if it matches the CSS selector and, if it doesn't, looks to its parent to see if it matches, and so on until it reaches the document root. If it gets all the way to the root without finding it, it returns null.

Updated Snippet:

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>

---

However, please note evolutionxbox's ment. You're recreating basic web functionality using non-semantic elements and JavaScript code. That destroys the accessibility of your page, and even for users who don't rely on assistive technology, it makes it impossible for them to use the advanced features of their browser to (say) open the link in a new tab, etc.

You attach the event listener to the document body. Is absolutely normal that you don't get the dataset: you can click out of the cell, or in a element into this.

You need attach the event to the desired elements with the data-link attribute:

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>
 

Instead of e.target.dataset.link use e.currentTarget.dataset.link

本文标签： Eventtargetdataset returning undefined javascriptStack Overflow