无法使用 querySelectorAll() 向元素添加事件侦听器

Question

我试图在某些具有data-hide-links属性的链接上添加mouseover事件，但它根本不起作用。

我知道我的循环工作正常并且它选择了正确的元素，因为我可以console.log()我想要的元素。 我也确定事件侦听器没有添加到元素中，因为当我查看元素的原型时， onmouseover属性为null

这是代码：

 let hideLinks = document.querySelectorAll("[data-hide-cursor]"); for (let i = 0; i < hideLinks.length; i++) { hideLinks[i].addEventListener("mouseover", () => { document.getElementById("cursor").classList.add("hide"); }); }

 #cursor { top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 1000; } #cursor>div { border-radius: 50%; width: 1.25rem; height: 1.25rem; background: black; transition: transform 0.5s ease, opacity 0.35s ease; }

 <div id="cursor" data-cursor> <div></div> </div> <button data-hide-cursor type="submit" class="submit-mail"> Submit </button>

我尝试使用let [...hideLinks] =...将元素解构为数组，但它没有改变任何东西。

Answer 1

您的代码工作正常。 Class hide什么都不做

 let hideLinks = document.querySelectorAll("[data-hide-cursor]"); for (let i = 0; i < hideLinks.length; i++) { hideLinks[i].addEventListener("mouseover", () => { document.getElementById("cursor").classList.add("hide"); }); }

 #cursor { top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 1000; } #cursor>div { border-radius: 50%; width: 1.25rem; height: 1.25rem; background: black; transition: transform 0.5s ease, opacity 0.35s ease; } #cursor.hide { background: red; }

 <div id="cursor" data-cursor> <div></div> </div> <button data-hide-cursor type="submit" class="submit-mail"> Submit </button>