Javascript 在forEach循环中获取目标而不是父对象的属性

发布于03月06日

我有一个forEach循环，它获取页面上具有指定属性的任何元素的属性.它看起来像这样:

const cursorActionElements = document.querySelectorAll("[data-cursor]");

cursorActionElements.forEach((el) => {
 const elAttr = el.getAttribute("data-cursor");

 el.addEventListener('mouseover', () => {
   console.log(elAttr)
 });
});

一切都运行得很好.它遍历并获取具有data-cursor属性的所有元素，并将其值存储在elAttr变量中.然而，由于某种原因，如果目标的父级恰好ALSO具有data-cursor属性，则它同时返回目标的data-cursor值和其父级的data-cursor值.

我真的不知道如何解决这个问题.我曾想过在mouseover上检索data-cursor值，但这只是意味着我需要使用another Event Listner，它似乎会让我的网站变慢一些.

请帮帮忙.

推荐答案

问题在于，事件是从子级向父级沿DOM向上传播，因此每个元素都会触发一次事件处理程序.要解决此问题，可以对传递给事件处理程序的事件调用stopPropagation().

还要注意，最好也从事件对象中读取data属性，以避免在依赖于事件处理程序内循环中的变量集时可能出现的任何作用域/闭包问题.

下面是一个进行了上述更改的工作示例:

const cursorActionElements = document.querySelectorAll("[data-cursor]");

cursorActionElements.forEach((el) => {
  el.addEventListener('mouseover', e => {
    e.stopPropagation();
    const elAttr = e.currentTarget.getAttribute("data-cursor");
    console.log(elAttr)
  });
});

<div data-cursor="foo">foo</div>
<div data-cursor="bar">
  bar
  <div data-cursor="foobar">
    foobar
  </div>
  <div>
    no data attribute
  </div>
</div>