Question

我尝试使用event.target.getAttribute('href')获取href属性，但由于事件委派。 event.target似乎设置为span或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';
}

请提供一些指导。我不需要jquery解决方案。

Answer 1

由于您有链接的子项，event.target可能会在点击发生时引用这些元素。

您可以在处理程序中使用this来引用链接元素，另一个选项是使用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

你为什么不试试

event.currentTarget.getAttribute（＆＃34; HREF＆＃34）

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

2 个答案: