JavaScript中Event.target.dataset获取data属性偶尔返回undefined问题问询

问题原因 #

点击行为的触发目标e.target并不总是绑定了data-link属性的外层<div class="cell">元素：当你点击<div>内部的<i>图标或者<span>文本区域时，e.target会指向没有data-link属性的子元素，因此读取dataset.link会返回undefined。只有当点击位置刚好落在外层<div>的空白区域时，才能成功读取到属性值，这就是成功率偏低的核心原因。

解决方案 #

不需要移除body上的事件监听器，只要修改事件回调的逻辑，从触发事件的元素开始向上遍历DOM，匹配最近带有data-link属性的元素即可：

document.addEventListener("DOMContentLoaded",() => {
    document.body.addEventListener("click",(e) => {
        console.log("clicked");
        // 向上查找最近的带data-link属性的元素
        const targetWithLink = e.target.closest('[data-link]');
        if (targetWithLink) {
            const link = targetWithLink.dataset.link;
            console.log(link + " is the link clicked");
            console.log("got the link");
            navigateTo(link);
        }
    })
})

Element.closest()方法会从当前触发事件的元素开始，沿着DOM树向上匹配传入的选择器，匹配成功就返回对应元素，匹配失败返回null，完全适配这类内部包含子元素的事件委托场景，不需要修改现有DOM结构。

• 若需要兼容不支持closest的旧版本浏览器，可以替换为手动遍历的实现：

document.addEventListener("DOMContentLoaded",() => {
    // 封装向上查找带data-link元素的逻辑
    const getClosestLinkEl = (el) => {
        while (el && el !== document.body) {
            if (el.dataset && el.dataset.link) return el;
            el = el.parentElement;
        }
        return null;
    }

    document.body.addEventListener("click",(e) => {
        console.log("clicked");
        const targetWithLink = getClosestLinkEl(e.target);
        if (targetWithLink) {
            const link = targetWithLink.dataset.link;
            console.log(link + " is the link clicked");
            console.log("got the link");
            navigateTo(link);
        }
    })
})

内容的提问来源于stack exchange，提问作者Saswat