как заменить onclick

Вот код, который определяет расположение ячейки на которую кликнули и затем запускает возможность отредактировать её содержимое.

let change = document.querySelector("#btn");
change.addEventListener("click", () => {
    for (let cell of document.querySelectorAll(".editable td")) {
        cell.ondblclick = () => editable.edit(cell), table;
    }
});

var table = document.getElementById("table"),rIndex,cIndex;
    for(var i = 1; i < table.rows.length; i++)
    {
        // row cells
        for(var j = 0; j < table.rows[i].cells.length; j++)
        {
            table.rows[i].cells[j].onclick = function()
            {
                rIndex = this.parentElement.rowIndex;
                cIndex = this.cellIndex+1;
            };
        }
    }
var editable = {
    // (B) PROPERTIES
    selected : null, // current selected cell
    value : "", // current selected cell value
    lastEditCell: "",
    
    // (C) "CONVERT" TO EDITABLE CELL
    edit : cell => {
        // (C1) REMOVE "DOUBLE CLICK TO EDIT"
        cell.ondblclick = "";

        // (C2) EDITABLE CONTENT
        cell.contentEditable = true;
        cell.focus();

        // (C3) "MARK" CURRENT SELECTED CELL
        cell.classList.add("edit");
        editable.selected = cell;
        editable.value = cell.innerHTML;

        // (C4) PRESS ENTER/ESC OR CLICK OUTSIDE TO END EDIT
        window.addEventListener("click", editable.close);
        cell.onkeydown = evt => {
            if (evt.key=="Enter" || evt.key=="Escape") {
                editable.close(evt.key=="Enter" ? true : false);
                return false;
            }
        };
    },
    // (D) END "EDIT MODE"
    close : evt => { if (evt.target != editable.selected) {
        // (D1) CANCEL - RESTORE PREVIOUS VALUE
        if (evt === false) {
            editable.selected.innerHTML = editable.value;
        }

        // (D2) REMOVE "EDITABLE"
        window.getSelection().removeAllRanges();
        editable.selected.contentEditable = false;

        // (D3) RESTORE CLICK LISTENERS
        window.removeEventListener("click", editable.close);
        let cell = editable.selected;
        cell.ondblclick = () => editable.edit(cell);

        // (D4) "UNMARK" CURRENT SELECTED CELL
        editable.selected.classList.remove("edit");
        editable.selected = null;
        editable.value = "";

        // (D5) DO WHATEVER YOU NEED
        if (evt !== false) {
            console.log(cell.innerHTML,rIndex, cIndex);
            getData();
            
            let myArray = arr[rIndex-1]
            myArray[cIndex-1] = cell.innerHTML;
            console.log(myArray)
            
        //
        }
    }}
};

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


Ответы (0 шт):