防止实时表上传时的双重活动功能答案

【问题标题】：Prevent double active function on live table upload防止实时表上传时的双重活动功能
【发布时间】：2020-03-09 22:39:09
【问题描述】：

我有一个带有 contenteditable 值的表，当我更改值时，ajax 操作将更新 DB 的值。问题是单击一个框，然后在警报继续出现后立即单击另一个框，而无法执行任何其他操作。有没有办法阻止其他点击功能一旦启动？

代码 JS：

function showEdit(editableObj) {
  $(editableObj).css("background", "#FFF");
}

function saveToDatabase(editableObj, column, id) {
  var isGood = confirm('Are you sure?');
  if (isGood) {

    $(editableObj).css("background", "#FFF url(./img/loaderIcon.gif) no-repeat right");
    $.ajax({
      url: "saveedit.php",
      type: "POST",
      data: 'column=' + column + '&editval=' + editableObj.innerHTML + '&id=' + id,
      success: function(data) {
        $(editableObj).css("background", "#FDFDFD");
      }
    });
    //  }
  } else {
    alert('Abort');
  }
}

php 表：

echo '<td contenteditable="true" onBlur="saveToDatabase(this, \'nameDB\', \''.$res2['valuefromDB'].'\')" onClick="showEdit(this);">' .$res2['valuefromDB'] .'</td>';

【问题讨论】：

可以防止函数触发。请描述您的代码应该如何工作的完美场景。现在每次移动焦点时它都会打开confirm提示，对吗？
现在当我点击页面的空白部分时，会出现确认警报，确认后将上传到数据库（一切正常）。但是，如果我按下另一个 td 单元格，确认被窃听并继续出现，无法取消或处理。
@EmielZuurbier 你有什么建议给我吗？每次用户移动焦点时我都会确认功能工作
个人建议不要使用onblur事件触发提示。而是创建一个按钮，您可以在该按钮上手动触发提示并保存整个表格。
@EmielZuurbier 是个好主意，但如果用户尝试更改所有行，我认为脚本将失败。 onblur 用于单独更改每一行

标签： javascript php

【解决方案1】：

您可以使用标志来阻止激活：

var saveEnabled = true; // Only let you save when this is true
function saveToDatabase(editableObj, column, id) {
  if (!saveEnabled) return; // If saveEnabled is false do not continue
  saveEnabled = false;
  var isGood = confirm('Are you sure?');
  if (isGood) {
    $(editableObj).css("background", "#FFF url(./img/loaderIcon.gif) no-repeat right");
    $.ajax({
      url: "saveedit.php",
      type: "POST",
      data: 'column=' + column + '&editval=' + editableObj.innerHTML + '&id=' + id,
      complete: function(data) { // Errors should be handled before this
        $(editableObj).css("background", "#FDFDFD");
        saveEnabled = true;
      }
    });
    //  }
  } else {
    alert('Abort');
    saveEnabled = true;
  }
}

【讨论】：

现在例如中止按钮不起作用，当您单击警报时继续出现。但现在如果我按下继续工作。
中止？继续？我在原始问题中没有看到这一点。
是的，我的意思是警报（警报结果是/否）
你能改写一下吗？看不懂
正如您在我的代码中看到的那样简单，当 onblur 更改（如单击表外）时，会出现确认或中止操作的警报。我的第一篇文章中的问题是当我通过单击另一个 TD 警报离开 TD 时，我无法继续或中止警报，否则如果我单击“空白页面”所有工作。如果我单击另一个 TD 警报，则使用您的代码仅适用于继续而不是中止。

【解决方案2】：

终于找到了解决办法，简单的第一步：

echo '<td contenteditable="false"  //false and not true this time

在函数 ShowEdit：

function showEdit(editableObj) {
  editableObj.setAttribute("contenteditable", true);
  editableObj.focus(); //focus directly when change contenteditable
}

我简单地将可编辑的 true 仅添加到 td 我编辑，因此如果用户在另一个 td 中模糊，则不会触发警报。

【讨论】：