javascript - 通过类名获取祖先

Question

我有一个带有按钮的组件，并列出了这两个按钮在单击时执行事件。我需要一种通用的方法来获取这些元素的祖先元素。结构如下:

<div class='a'>
   <button class ='b' data-name="hello">
      <span class ='c'>clickMe
         <span>somehting</span>
      </span>
   <button>
   <ul class ='d'>
      <li data-name="about">
          <span class ='e'>something here
             <span>somehting</span>
          </span>
      </li>
      <li data-name="home">
          <span class ='e'>something elser here
              <span>somehting</span>
          </span>
      </li>
   </ul>
</div>

我尝试获取元素按钮和 li，因为我需要获取数据名称信息。 e.target是被点击的元素

var targetel = goog.dom.getAncestorByClass(e.target,null,class??);

不确定如何获取正确的元素，无论它是按钮还是 li。我需要为所有元素添加一个唯一的类吗？

Answer 1

只需使用e.currentTarget

var result = document.querySelector('#result');
var clickables = document.querySelectorAll('button, li');

//add click listener to elements
for (var i = 0, l = clickables.length; i < l; i++) {
  clickables[i].addEventListener('click', getDataName);
}

function getDataName(e) {
  var dataName = e.currentTarget.getAttribute('data-name');
  
  result.textContent = dataName;
}

<div class='a'>
   <button class ='b' data-name="hello">
      <span class ='c'>clickMe
         <span>somehting</span>
      </span>
   </button>
   <ul class ='d'>
      <li data-name="about">
          <span class ='e'>something here
             <span>somehting</span>
          </span>
      </li>
      <li data-name="home">
          <span class ='e'>something elser here
              <span>somehting</span>
          </span>
      </li>
   </ul>
</div>

<div id="result">data-name of clicked element goes here</div>