0

Проблема такая, когда навожу на первую строку с событием "mousemove", то текст находящийся в первой строке должен становится красным. Когда на вторую - синим. Но на выходе, как только мышь заходит на таблицу срабатывает сразу два обработчика. И текст и в первой и во второй строке становится окрашенным. Как пофиксить данную проблему.

function fn() {
  let res = document.querySelector("table");
  let resArray = Array.from(res.rows);
  resArray.forEach((i, index) => {
    if (index == 0) {
      i.style.color = "red";
    } else if (index == 1) {
      i.style.color = "blue";
    }
  });
}

tableTest.addEventListener("mousemove", () => {
  fn();
});
 <table border="1" cellspacing="10" width="400" id="tableTest">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
    </table>

3
  • потому что ты тупо перебрал все строки и изменил их цвет, а надо только одну - элемент события, target 7 авг 2022 в 19:00
  • Получаещь элемент на котором находится мышка во время mousemove. Проверяешь если оно ровно первой строке табицы то красный, если второй то синий. И никаких циклов тут не нужно.
    – eccs0103
    7 авг 2022 в 19:09
  • не знаю, может я делаю что-то не так, но я делал так, и у меня все ровно все красится. Так же как и с таргетом.(@Арман
    – user503400
    7 авг 2022 в 19:13

1 ответ 1

1

Событие mousemove избыточное, оно срабатывает десятки раз пока ты наводишь курсор на строку таблицы.

Работает с event.target, - элемент, на котором возникло событие. Сверяем, если элемент равен необходимой строке, красим её.

function fn(event) {

  if (event.target.tagName == 'TD') {

    let table = document.querySelector("table");
    let tr = event.target.closest('tr');

    if (tr == table.rows[0]) {
      tr.style.color = "red";
    }

    if (tr == table.rows[1]) {
      tr.style.color = "blue";
    }
  }
}

tableTest.addEventListener("mouseover", fn);
<table border="1" cellspacing="10" width="400" id="tableTest">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

1
  • Спасибо, тысячу раз спасибо!!))Теперь я понял в чем была моя сложность!)
    – user503400
    7 авг 2022 в 19:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.