Javascript 从单击元素的父级读取数据集

我有以下html和Javascript。我想要一组带有单个

onclick

处理程序的按钮

    <div id="parent1">
        <button data-idx="1" data-action="test">Click me</button>
        <button data-idx="2" data-action="test">Click me</button>
    </div>
    <div id="parent2">
        <button data-idx="1" data-action="test"><span>Click me</span></button>
        <button data-idx="2" data-action="test"><span>Click me</span></button>
    </div>
    <script>
        const parent1 = document.querySelector("#parent1");
        const parent2 = document.querySelector("#parent2");
        parent1.addEventListener("click", (evt) => {
            let obj = evt.target.dataset;
            console.log(obj);
        });
        parent2.addEventListener("click", (evt) => {
            let obj = evt.path[1].dataset;
            console.log(obj);
        });
    </script>

点击我
点击我
点击我
点击我
const parent1=document.querySelector（“parent1”）；
const parent2=document.querySelector（“parent2”）；
parent1.addEventListener（“单击”，（evt）=>{
设obj=evt.target.dataset；
控制台日志（obj）；
});
parent2.addEventListener（“单击”，（evt）=>{
设obj=evt.path[1].dataset；
控制台日志（obj）；
});

parent1

的代码运行良好，我看到

{idx:“1”，action:“test”}

parent2

的代码也可以工作，但这只是因为在本例中，我预先知道按钮的

innerHtml

的结构。实际上，未知，硬编码的

evt.path[1]

不适用

然而，数据集总是在

#parent2

---

如何可靠地找到数据集？例如，我可以获取与触发事件的子级的父级相关的索引吗？

也许您应该使用composedpath而不是path:请参阅

通常，您可以在路径[n]上循环并避免未定义的错误

或者，您可以使用上面的

evt.target.dataset[keyname]

访问不同的变量