Отключить ячейку таблицы после первого щелчка в JavaScript

Question

Я имею ячейку таблицы как следующее:

<td id=report onMouseUp='clickReport()' onKeyPress='clickReport()' >Click</td>";

Функция события как ниже:

function clickReport() {
document.form.submit();
}

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

Я попытался с помощью метода protectDefault(), но он не работает.

function clickReport() {
document.form.submit();
document.getElementById("report").onMouseUp = function(e) 
{
 e.preventDefault();
 return false;
}
document.getElementById("report").onKeyPress = function(e) 
{
 e.preventDefault();
 return false;
}
}

Может кто-нибудь, пожалуйста, помогите!

Answer 1

1) Вы можете передать параметр элемента в свои функции событий, чтобы вы могли легко получить доступ к элементу DOM. Увидеть ниже.

<td id=report onMouseUp='clickReport(this)' onKeyPress='clickReport(this)' >Click</td>";

2) При первом запуске функции вы можете обнулить события, чтобы они больше не срабатывали. Увидеть ниже.

// the *element* parameter is yor <td> element here 
function clickReport(element) {
    document.form.submit();
    element.onMouseUp = null;
    element.onKeyPress= null;
}

3) Вы можете использовать событие onclick вместо onmouseup и избавиться от onkeypress, если хотите, чтобы оно работало только при нажатии.

<td id=report onclick='clickReport(this)'>Click</td>";

function clickReport(element) {
    document.form.submit();
    element.onclick= null;
}

---

Рабочий кодекс: https://codepen.io/anon/pen/MmVNMe

Answer 2

Это должно работать.

так как сначала disableClick не определено, щелчок сработает, как только он сработает, флаг будет установлен в значение true, и щелчок больше не будет возможен.

<td id=report onMouseUp='!disableClick && clickReport()' 
 onKeyPress='!disableClick && clickReport()' >Click</td>"

function clickReport() {
 document.form.submit();
 window.disableClick = true;
}