事件委派从列表中获取点击属性

Question

I tried getting href attribute with event.target.getAttribute('href') but due to event delegation. event.target seems to be set to either span or i .

<a href="#gallery">
  <i class="fa fa-camera"></i>
  <span class="menu-text">Gallery</span>
</a>
<a href="#download">
  <i class="fa fa-cloud-download"></i>
  <span class="menu-text">Download</span>
</a>   


//script
 for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', openMenu);
}
function openMenu(event) {
    event.preventDefault();
    var clickedMenu = event.target.getAttribute('href');
    document.querySelector(clickedMenu).style.display = 'block';
}

Kindly provide some guidance. I do not need a jquery solution.

Answer 1

Since you have children for the links, event.target may refer to those elements if the click had happened on them.

You can use this inside the handler to refer to the link element, another option is to use event.currentTarget

 var links = document.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) { links[i].addEventListener('click', openMenu); } function openMenu(event) { event.preventDefault(); var clickedMenu = this.getAttribute('href'); result.innerHTML = clickedMenu + ' or ' + event.currentTarget.getAttribute('href'); document.querySelector(clickedMenu).style.display = 'block'; } 

 .hidden { display: none; } 

 <a href="#gallery"> <i class="fa fa-camera"></i> <span class="menu-text">Gallery</span> </a> <a href="#download"> <i class="fa fa-cloud-download"></i> <span class="menu-text">Download</span> </a> <div id="result"></div> <div id="gallery" class="hidden">gallery</div> <div id="download" class="hidden">download</div> 

Answer 2

Why do not you try

event.currentTarget.getAttribute("href")