похоже, что removeEventListeners не работает - PullRequest
Новая
       3

похоже, что removeEventListeners не работает

0 голосов
/ 05 марта 2019

Я пытаюсь сделать простой скрипт для обработки рейтинга, используя звездную систему.Я остановился в момент нажатия на звезду, потому что все звезды должны оставаться в положении после нажатия на одну, пока слушатель события удаляется только для этой.

Можете ли вы сказать, что я делаю неправильно?Я сомневаюсь, что 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 Ответ

0 голосов
/ 01 июня 2019

Попробуйте определить свои обработчики событий mouseOverStar, mouseOutStar и clickOnStar вне функции drawStars.

Вам необходимо ссылаться на один и тот же обработчик как в addEventListener, так и removeEventListener дляэто на работу.

Проверка https://www.jonportella.com/you-are-using-browser-events-wrong/

...