removeEventListeners似乎不起作用
[英]removeEventListeners doesn't seem to work
問題描述
我正在嘗試制作一個簡單的腳本來使用星級系統處理評分。 我在按下星號的那一刻就停了下來，因為在刪除一個事件監聽器的同時，所有星號在單擊一個星號后都應保持在原位。
你能告訴我我在做什么錯嗎？ 我懷疑removeEventListener不能正常工作； |
const drawStars = (node, starsNumber = 5, cssRef = "_star") => { if (starsNumber < 1) return false; let star; // classes to aply when star's filled or not const starFilled = `fas fa-star ${cssRef}`; const starContour = `far fa-star ${cssRef}`; // drawing stars for (let i = 1; i <= starsNumber; i++) { star = document.createElement('i'); star.className = `${starContour} ${cssRef}`; node.appendChild(star); } node = [...node.childNodes]; // putting listeners on every star node.forEach((star, index) => { // filling stars after hovering const mouseOverStar = () => { for (let i = 0; i < starsNumber; i++) { if (i <= index) node[i].className = starFilled; else node[i].className = starContour; } } // cleaning stars when mouse is out and no star was clicked const mouseOutStar = () => { node.forEach(star => star.className = starContour); } // trying to remove event listeners from every star but with no effect const clickOnStar = () => { node.forEach(star => { star.removeEventListener('mouseout', mouseOutStar); star.removeEventListener('mouseover', mouseOverStar); }) } // applying listeners star.addEventListener('mouseover', mouseOverStar); star.addEventListener('mouseout', mouseOutStar); star.addEventListener('click', clickOnStar); }); } // example of use const starsContainer = document.querySelector('.stars'); drawStars(starsContainer);
.stars { margin: 30px; font-size: 30px; color: rgb(231, 199, 19); cursor: pointer; }
<html> <head> <link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" /> </head> <body> <div class="stars"></div> </body> </html>
1 個解決方案
解決方案1
0 2019-06-01 13:01:39
嘗試在drawStars函數之外定義事件處理程序mouseOverStar ， mouseOutStar和clickOnStar 。
您需要在addEventListener和removeEventListener引用完全相同的處理程序，以使其正常工作。
檢查https://www.jonportella.com/you-are-using-browser-events-wrong/
替換似乎不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.