無法使用 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>