Извлечение элемента предка с определенным атрибутом данных

Question

Как я могу получить элемент предка с определенным атрибутом данных, щелкнув один из его дочерних элементов?

Мне нужно получить атрибут data-cell при нажатии на <span> или <div>. Я попытался использовать node.parentElement, но когда я нажимаю span, он возвращает мне 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>

Это будет делать это:

Использует время цикла для перебора обратно DOM дерева с помощью parentElement. Если найден атрибут data-cell, возвращаем элемент и разбиваем цикл, если нет, тогда возвращаем false.

Answer 2

Вот один из способов сделать это:

HTML:

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

JavaScript:

// generic functions 
window.getAncestorWithAttribute = function(elem,attr) { 
    elem = elem.parentNode; 
    while (elem) { 
     if (elem.hasAttribute(attr)) 
      return elem; 
     elem = elem.parentNode; 
    } // end while 
    return null; 
}; // end getAncestorWithAttribute() 

// event handlers 
window.mainClickCallback = function(ev) { alert(getAncestorWithAttribute(ev.target,'data-cell')); ev.stopPropagation(); }; 

// attach event handlers to target elements 
Array.forEach(document.getElementsByClassName('clicker'), function(elem) { elem.addEventListener('click', mainClickCallback); }); 

http://jsfiddle.net/z8fba8jg/4/

Answer 3

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>