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