javascript - 检索具有特定数据属性的祖先元素

Question

如何通过单击某个子元素来检索具有特定数据属性的祖先元素？

我需要获取data-cell单击 <span> 时的属性或<div> 。我尝试使用 node.parentElement ，但是当我单击一个跨度时，它会返回 div，而且很清楚。

有类似 node.parentElement.dataset.dataCell 的东西吗？得到我需要的东西？

<table>
 <tr>
  <td class="out" data-cell="3-2-2015">
     <div>
        <span> Number one </span>
        <span> Number two </span>
        <span> Number three </span>
     </div>
  </td>
 </tr>
</table>

Answer 1

    document.querySelector("table").addEventListener("click", function(e){
         var element = e.target;
         var found = false;
         if (element.tagName != "TABLE")
         {
             while(element && element.parentElement && element.tagName != "TABLE")
             {
                 if (element.hasAttribute("data-cell") )
                 {
                     found = element.getAttribute("data-cell");
                     break; //stop the loop;
                 }
                 element = element.parentElement;
             }
         }
      
         alert(found);
    });

<table>
 <tr>
  <td class="out" data-cell="3-2-2015">
     <div>
        <span> Number one </span>
        <span> Number two </span>
        <span> Number three </span>
     </div>
  </td>
 </tr>
 <tr>
  <td class="out" >
     <div>
        <span> Number one </span>
        <span> Number two </span>
        <span> Number three </span>
     </div>
  </td>
 </tr>  
  
</table>

这样就可以了:

使用 while 循环使用 parentElement 迭代备份 DOM 树。如果找到属性 data-cell，则返回该元素并中断循环，如果没有找到，则返回 false。