0

我正在尝试制作一个简单的脚本来使用星级系统处理评级。我在按下星星的那一刻停了下来，因为在单击一个星星后，所有星星都应该保持在原位，而事件侦听器只为这个星星被删除。

你能告诉我我做错了什么吗？我怀疑 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>

4

1 回答 1

0

尝试定义您的事件处理程序mouseOverStar，mouseOutStar并clickOnStar在drawStars函数之外。

您需要在其中引用完全相同的处理程序addEventListener并removeEventListener使其工作。

检查https://www.jonportella.com/you-are-using-browser-events-wrong/

于 2019-06-01T13:01:39.183 回答