Как отвязать обработчик события?

Question

[Monserator]

Суть в чем, есть таблица и после клика на ячейку надо отвязать событие, что б ячейка сверху и снизу не срабатывала на нажатие, придумал код на отвязывание верхней ячейки, в консоль выводится правильный td, но отвязываться не хочет. Объясните - помогите начинающему :) Всем вкусного чая :*

<table id="table">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

.color1 {
	background: red;
}

td {
	width: 50px;
	height: 50px;
	border: 1px solid black;
}

let trs = document.querySelectorAll("tr");

    let rowNum = 1;

    for (let tr of trs){
        let tds = tr.querySelectorAll("td");


        let col = 1;
        for(let td of tds){
            td.dataset.col = col++;
            td.dataset.row = rowNum;
            let rowCount = document.querySelectorAll("td[data-row]").length;
            if (rowCount % 3 == 0){
                rowNum++;
            }

            td.addEventListener("click", function func(){
                let thisCol = td.dataset.col;
                let thisRow = td.dataset.row;

                let BoxCol = document.querySelectorAll('td[data-col="' + thisCol +'"]');


                for (let box of BoxCol){


                    if (box.dataset.row == Number(thisRow) + 1){
                        console.log(box);
                        box.removeEventListener('click', func);
                    }
                }
                td.classList.add('color1');
            });

        }
    }

Answer 1

[Stalker_RED]

У вас func не совпадает, можете в этом удостовериться запомнив парочку и сравнив. Вы же их в цикле создаете, и для каждой ячейки своя функция, и только последнюю из них вы пытаетесь убрать.

Можете, например, запоминать все func в WeakMap, где ключами были бы сами ячейки.

Или, как вариант, перепишите func так, чтобы ее можно было объявить один раз, еще до перебора ячеек.

----------------------

Или вообще откажитесь от removeEventListener, и вместо этого примерните фильтр перед addEventListener.

Или повесьте всего один обработчик кликов на table и уже внутри обработчика проверяйте по какой ячейке был клик. Это еще и память экономит.

Comments

[Олег]

Последний абзац - самое оптимальное решение