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.